構建設計師和程序員的共同語言

2019-2-24 分享達人 交互設計及用戶體驗

從控件封裝_|198彩区域代理、布局說明__盈彩聊天室、標注語言三個方麵|青银高速地图,指導設計協同開發_澳门黑社会老大尹国驹,共同建立項目框架和控件庫|__038彩票下载网站,規範設計方式和開發方式||_赢钱彩网站。

undefined


設計師拿到開發剛寫好的頁麵時-易彩娱乐是黑平台吗,往往會眉頭一皺---掌上彩票是真实的吗,這跟自己的設計稿差別有點大啊_-_强心脏20121127。在設計走查的時候才發現_|洛克王国蕾纳斯,幾乎每個頁麵都有大大小小的問題|-|卓君身高。從顏色樣式到按鈕組件__青岛友信机场宾馆、從元素尺寸到界麵布局|||云顶娱乐场官网下载,都多多少少存在偏差-__云顶娱乐每天送6金币。開發一般情況都是在完成功能開發後_-_优优娱乐彩票合法吗?,才對頁麵視覺進行統一優化||注册送本金的彩票,但是無奈需要優化的地方太多太分散-艾斯奥特曼大电影,成倍地增加了工作量--|防患于未然的意思。


那麼能否製定一套協作方案|-|自助硬币存取款机,把固定的||168彩票网址是多少、通用的和可複用的元素或組件封裝起來-|105彩105彩票网,運用在項目初期設計和開發的工作流程中-||赢彩彩票账号怎么注销。從而統一地把控設計項目中的所有可變元素_-优衣库视频种子百度云,方便設計師和開發在項目中後期做各種改動--常委人数,同時也利於項目的迭代升級呢__森马网上折扣店?


這裏我做了以下思考||淘宝购物车参数错误,歡迎大家一起來交流探討-361彩票手机官方网站。



/目錄

一-高效渗透剂、寫在前麵

二|_娱乐天地彩票信息、控件封裝

三_张檬陈楚河、布局規範

四--花为眉男主角、標注語言

五|-|2018大乐透、總結



一_|快乐大本营 棒棒堂、寫在前麵

UI設計要有組件化|--心德维拉、模塊化-|怎样在淘宝网开店、結構化的思維__-1312彩票。以各平台設計規範為基礎-||南通开沙岛,從控件封裝__-赢咖网址是多少、布局規範和標注語言三個方麵|||11086移动彩票是正规的吗,構建一套設計師和開發之間的共同語言|-|01彩票官方APP。



/文字&文本


在封裝前我們先定義一下設計中最常用到的元素——文字-|_2019年四不像欲钱料。文字在UI界麵中幾乎撐起了絕大部分內容|-诺基亚c3软件下载,它的功能包括但不限於標題導航-不属于国家领土、內容構建_-dota金箍棒、說明解釋_1995彩票反水025漏洞、標簽示意等等|_15700牛蚌彩票开奖现场。把文字跟圖標--今日华商报新闻、背景等元素組合起來的時候-_-2011手机qq下载,在界麵中形成了更明確的意符---22彩票害死人。


(一)換行規則

文字在界麵中的顯示方式可分為標簽|诺基亚翻盖手机大全、短文本_|众赢彩票网址是多少、長文本三種||众彩网是做什么的。標簽和短文本一般情況下不換行顯示-||云顶国际登录、如在特殊情況下會超過一行-猪肉概念股,則使用省略號顯示-_疥舒宁多少钱。長文本特指會換行顯示的文本|-_106彩票首页。




(二)行高設定

各係統平台都有自己默認的字體行高規則|-360彩票导航走势图解,但是這些行高規則並不統一|-可恶的男妇科医生,比如iOS的字體行高對照表如下|陈俊文:

來源見水印


而且默認的行高在展示長文本(多行顯示)時_|-淘1站,效果並不一定理想__361娱乐平台登录网址,甚至可能會很醜陋_-尿毒症武警二院专家。所以我們需要製定統一的標準來規範各平台的字體設計和開發規則__青龙寺遗址公园。


解決方案---众博彩票是骗局吗:對於標簽和短文本默認設定1倍行高|-_李逍遥和景天,長文本根據文本內容和字號大小來設定行高_|汽油提价,以達到最佳閱讀效果_阿玛拉王国 锻造。

undefined

行高設定



(三)視覺間距

規範短文本行高|_|千山暮雪粤语,確保視覺間距等於實際標注間距_|_金黛尔,才能保證開發準確還原界麵布局-||成人奶妈论坛。

undefined

視覺間距示意圖




/特殊情況

有些控件的文本長度在少數特殊情況下會換行顯示保定保洁公司信誉安全,為了簡化適配過程|-038彩票可以提现吗?,我們可以直接使用長文本來設計|电影节目表。

(一)Toast



(二)橫幅





/圖標&切圖


圖標在某些場景下可以無需文字說明__圣元积分网,更直觀簡潔地表達含義_|_阜新苏阳。設計同一類圖標時應該保持視覺效果統一--自制豆汁,視覺尺寸可以通過使用模板來進行規範|--四川特色文化。

undefined

圖標設計模版



為了保證同一組圖標的影響範圍相同__|湖南卫视直播在线观看古剑奇谭,我們在設計圖標時首先設定視覺安全區域_-|重生小保姆19楼,然後加入透明度為1%的背景作為影響範圍圖層--_至尊心水app安全吗。切圖時需把影響範圍圖層包含進去_杨幂不雅视频种子,不僅便於設計師規範所有圖標的尺寸大小_--欧布 奥特曼,也方便開發直觀獲取到圖標的實際切圖大小--|射阳中学。


圖標設計示例




二|_-亿彩彩票手机官网、控件封裝

利用組件化的思維-盈彩娱乐是什么,將可重複利用的元素或者控件打包成固定的模版|大旱之年,稱之為封裝-|_钱塘老娘舅2013直播。

這裏設計師可以使用Sketch的文字_易乳宝官网、圖層|-_运盛彩票pk10计划、組件封裝功能||_易彩票是不是忽悠人的,構建可協作|||总裁太大了边做边放药、方便維護|-众赢彩票娱乐有限公司、完整的控件庫-_超女娃娃主题曲。程序員在構建項目框架時-__亿点卡盟平台,也應對每一個元素進行可複用性封裝__-长三角经济区。


(一)封裝基礎顏色

基礎顏色有主色--铁路安全管理条例、輔色_|-150期双色球开奖结果、強調色||黄油笔、中性色(灰色)_-爬行天下商城、功能色(成功-_武汉的小吃、失敗_||阳江红毯影院、警告-_中乙联赛球队、不可點)等_-雨露文章。


在sketch中|_众发彩票注册,新建一個圖層|_汗癣图片,設定好圖層樣式_|_105彩票安全吗,點擊新建圖層樣式完成封裝_-众乐彩APP下载。封裝樣式按固定格式“類別/編號+顏色”來命名__冰城文明小博客,其中“/”可以自動識別為列表層級_|168彩票安卓版。

顏色封裝




(二)封裝常用字體

每個項目都應該設定常用字體庫___石家庄紫萱保健按摩,例-__卓易彩票出现暂停服务:導航標題|优酷轻松时刻、文章標題-柳焚余、正文||cf夜玫瑰h吧、說明|_168手机彩票开奖、鏈接等等_||仙剑5破解版。


在sketch中_-菲诗曼尔,新建一個文本--金陀,設定好文本樣式_|西凉剧情诗句,點擊新建文本樣式完成封裝-|-金兰妃。封裝樣式按固定格式“主類別/二級類別/顏色”來命名|__元素太初,其中“/”可以自動識別為列表層級__金家街公园。


字體封裝



(三)封裝圖標

APP項目中的圖標大小一般設定為20px_|永盛娱乐手机、24px|-东北二嫂水仙百度云、28px|_108娱乐是怎么盈利、32px__|众盈彩票投资是真的吗?、44px等|-红罂粟2生死之间。


在sketch中-陈德铭去向,新建圖標影響範圍圖層-_-永胜国际投彩,設定安全區域|_铝矾土骨料,畫好圖標後點擊新建symbol按鈕-|抓住偷水贼。封裝的圖標按固定格式“範圍/具體位置/名稱”來命名_|2M彩票2m永久费资料,其中“/”可以自動識別為列表層級-||淄博豪哥健身俱乐部。


圖標封裝



(四)封裝按鈕

按鈕一般情況下有兩種適配方案|金良顺,第一種固定邊距_-|淘宝开店流程,第二種固定尺寸|-|198彩怎么样。封裝時結合Dynamic Button 3.5插件-39彩票的手机网站,可以動態製作同類型按鈕_--小型玉米深加工项目。


在sketch中_|众赢彩票官方网站,利用已封裝好的字體和顏色來組合成按鈕的文本和背景-设计一个logo多少钱,文本命名格式為“上邊距_--雪碧真我篮球六人行:右邊距-__喷立婷:下邊距-_|198平台计划:左邊距”--瘦儿鞋,如果上下和左右邊距並分別相同__|赵海军,則隻需要給出上邊距和右邊距的數值-|药酒是在哪个朝代之后出现的。如“10:20”__-众发娱乐是违法的吗。按鈕背景命名為BG|-宏伟租房,設定為已封裝的顏色_|致命交易市长放过我。執行一次“⌘+J”的操作-|鹿喜微断食纤体,關聯文字和背景-吉林市都市110在线收听,然後將兩者用symbol封裝-|门头沟电大在线。


封裝後取消Dynamic group編組




由於按鈕大小會根據內容文字長度而改變01彩票官方APP,因此需設定合理的適配規則_意彩娱乐。


固定文本左上邊距和高度



固定背景的高度



(五)統一維護

基礎元素樣式可以放在一個畫布上進行統一管理_--易网彩票靠谱吗。

undefined

顏色和字體可以統一管理





三__|娱乐天地点检、布局規範

利用模塊化思維進行布局---永盛国际赢了取不出来,將由已封裝的組件構成的功能區編組成一個模塊|_-tksnis-009,模塊可以自由排列組合_-十六楼影视,增加或刪除||_赢天下国际娱乐平台。


(一)基本框架

界麵布局應遵循各平台基礎設計規範-_搞机圈,iOS和安卓的基本框架不能混用-|_女演员陈嘉男。

undefined

安卓&iOS對比圖



/開發規範

製作高保真設計稿時我們統一使用iOS設備的750*1334分辨率_|-i7电脑配置清单,對應Android的720*1280分辨率-__长春房地产报。無需新出一套設計稿-_掌上平台投注。


iOS和Android設備在設計和開發時應該注意的差異|--4466kk,基於1倍標注

/視覺上

a. iOS狀態欄20pt--_金点子小发明,Android狀態欄25pd

b. iOS導航欄44pt_-金山快译通,Android導航欄48pd

c. iOS菜單欄49pt_|108娱乐app,Android菜單欄48pd


/交互上

a.  Andriod有物理返回按鈕|珂黛丽,點擊控製返回上一步操作|-2019年送彩金网站大全,而不僅僅返回上一個頁麵|诚信公棚;iOS沒有實體返回按鈕--纳税人管理码是什么,導航欄的back按鈕控製返回應用內的上一層頁麵_-_卓易彩票什么时候恢复。因此在設計時每個頁麵都應該有明確的返回或關閉按鈕

b. 導航標題的位置iOS居中顯示--福鼎在线,Android靠左

c. 安卓對列表操作欄的處理為長按-成人网1234,iOS為左滑_-_飞天侠女电影。實際處理的時候可以分開設計_|5320论坛,也可以設計成統一的操作方式



(三)模塊化布局

模塊化布局對於設計師來說可以使頁麵功能和信息分布清晰明了-_女总统音译歌词,對於開發來說也更利於進行頁麵布局-11选五投注平台亿博。


undefined

例一_-_众信彩票官网提不了款:主界麵


undefined

例二|日本大地震电影:內容頁





四__勇士vs步行者、標注語言

利用sketch插件導出可自助查看標注的html文件|二手柴油皮卡车,標注文件無需手動生成___东北二嫂水仙车震ed2k,也不會對設計稿造成遮擋__圣洁化身索拉卡多少钱。但是開發要花更多精力去對每一個元素的樣式_bl文h、間距進行點擊查看-_|亿盈嘉的骗局,相比之前直觀的標注__|093彩票软件100,增加了閱讀成本|-|155是移动的吗。


為此我們設計一套標注方案-|_12强赛世预赛赛程,可以通過少量標注-|_上海有蹦极吗,提供準確的多界麵適配信息|_众赢挂机软件登录。標注規則是對由適配不同屏幕造成歧義的地方做針對性地標注說明_-计提福利费分录。


(一)固定框架

在設計界麵時古董估价,首先設定界麵的固定框架結構|--钢筋混凝土管规格,如頁麵內容區的安全邊距|_|芳草集橙花痘印修护精油。


undefined

全局界麵安全邊距設定


/模塊外間距設定

多個模塊之間的間距設定

undefined

模塊間距設定-陈志平博客,一般情況下可以不做標注



/模塊內安全區域

模塊內部組件和元素的影響範圍

undefined

模塊內安全區域標注




(二)基本標注類型

規範好界麵的布局和模塊的構建方式後_--小米1锤子rom下载,針對模塊或者組件在適配過程中會變動的部分|-|360龙将官网,或者固定不變的部分_-_台风银河登陆海南,特別標注說明_--168彩票苹果版本怎么下载。其餘沒特別標注的部分按照默認標注尺寸來布局__亿彩彩票钱能提现吗。


/固定高

undefined

固定區域高度



/固定寬

固定彈出框寬度



/固定百分比

固定圖形所占頁麵的百分比



/固定邊距

固定邊距


/固定比例(Fixed Ratio)

undefined

固定模塊寬高比



/等分分布

undefined

等分分布


/範圍內居中

undefined

在標識的範圍內居中分布





(三)標注實例

因此方案尚未落實到實際項目中___指险套,因此在這裏以網易雲音樂為例_|-下载qq2011,按新的標注方案進行剖析說明_|易盈彩票靠谱吗?。


例一




例二



undefined

例三



例四




五_暴龙摩托车、總結

文章內容更多偏向指導設計師如何規範設計方法_日之泉,同時創造了幾種標注語言(FR__易网彩票、ED|-|2019最新送现金的棋牌、AC等)|_欧美动物video与人。後期組織設計和開發同學一起就此方案進行交流討論-_至尊彩是不是真的吗,給大家普及這種設計和標注方法--132彩票软件,讓設計師和開發能夠就組件封裝和標注語言的方案達成共識_365彩票登录网址是多少,方便後期協作_-|青海卫视电视剧,提高工作效率__168开奖网历史。同時聽取多方觀點|阿列克斯 加西亚,對此文檔進行不斷優化完善_--亿彩彩票官网百度。

標簽: 構建設計師和程序員的共同語言

分享到_||三中三规律: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap