追求卓越一諾千金

藍藍設計-重庆324医院,2011年成立||cba球员年薪,主創清華團隊_-_致富彩合法吗,專注軟件和互聯網ui設計開發-_-河南马桶解说。擅長企業信息化管理_|陆地巡洋舰摩托车、監控__|哈尔滨凌志手机报价、大數據軟件UIUE谘詢和設計開發服務-_下载qq2011正式版免费下载。立足UI-||360重庆老时时开奖结果,好好學習|--脊柱宝,天天進步-约彩彩票安全吗!


如何建立一份移動UI設計規範--11选5选号技巧?

2019-3-8 用心設計 設計思維


如果您想訂閱本博客內容__抓蛇狂人奥斯丁,每天自動發到您的郵箱中-掌上彩票官方版下载, 請點這裏

 

在多人團隊裏-诺基亚5802软件下载,通常不同的設計師負責不同的流程--_手机qq2011官方下载正式版免费下载,如果沒有UI設計規範|||kc2005,不同的設計師就會對相同的組件做出不同的方案--|二嫂水仙。產生大量重複工作-__尊彩赚钱可靠吗,效率比較低_-喂养恐龙赚钱。而製作設計規範和UI KIT之後|||didee,則可以直接利用KIT裏的組件快速搭建好頁麵-|移动彩票网站靠谱吗,把設計師從基礎工作中釋放出來|_-众发娱乐代理能提现吗,大大提升設計效率_|盐城一中贴吧。

目錄

一_--19手机网、為什麼要建立規範

  • 用戶體驗一致
  • 塑造品牌感
  • 利於多人協作
  • 方便維護和更新--|盐城招标,減少冗餘內容

二|_|北京市朝阳区教育网络视频平台、規範的適用範圍

  • 適用於處於成長期和成熟期的產品-|_038彩票骗局。
  • 規範不是越全越好|||许家印私人飞机。適合就是最好-|_168彩票靠谱吗。

三|长乐市人民政府、如何建立規範 

  • 整理產品的組件和複用的內容
  • 基礎規範(柵格 間距 基礎網格  顏色 字體 )
  • 組件規範(按鈕|易富娱乐彩票app、導航-|3cp彩票、彈框|-132彩票投注平台、缺省圖_-全国计算机一级考试试题及答案、標簽|塔罗牌占卜大师 tlpnana、列表_|亿客隆彩票app、卡片等等)

一_|上海中潭癫痫能治愈、為什麼要建立設計規範_-金立风华2?

1 利於多人協作--|2628彩下载,提高效率

2 增強一致性淮安草根网,塑造品牌感

製作和遵循設計規範_-乐妇源养阴宝,能夠保證整個產品的交互效果和視覺風格-北京迪卡侬营业时间、乃至文案的統一性||新密五个人,提升用戶的體驗|--吴尊的qq号是多少 要真的。

3 減少冗餘內容--成都江潮电脑,方便維護和更新

同類內容使用一樣的組件___淘金币换购,能夠降低輸出的內容量_093彩票上面有高手吗,減少冗餘的控件和代碼|雅虎翻译鱼。同時也便於維護-_云谷彩票手机版登录,在迭代時進行統一的更新和應用|_美妈基地育儿论坛。

4 利於工作交接 

方便設計團隊和其他團隊交接-_东莞一条龙服务流程,如果團隊有人員變動-|励志歌曲排行榜,也方便後續入職的同事能夠通過規範迅速熟悉產品_-|金华职业教务网,快速上手_|玩趣乐品。

二|_长虹手机客服电话、規範的適用範圍

前麵的文章我提到過_-|葱灯网,如果產品處於啟動期的話-|极地海洋世界团购,這個時候最重要的事情是圈到第一波用戶_--038彩票平台客服,讓自己活下去--易彩快三。在這個階段產品會頻繁的改版2018大乐透开奖结果、驗證--印度片新娘之无悔的爱,迭代非常快-|_赢彩彩票开奖apk,整個團隊可能都處於拚命加班的狀態-360彩票大厅杀号定胆。在這種情況下做設計規範文檔顯然事倍功半_|_宠妃 肉的章节,一個是浪費人力資源_鸟巢 地铁,另外就算做了-_智能手机,在頻繁更新的背景下也很難去執行|-单晓亮。

因此設計規範文檔更適合於那些跨越0-1階段的產品_|雅迪女鞋官网,這個時候產品已經用有了一定的用戶-北京爱情故事吕夏,團隊也會擴張__-俗人岛华人论坛。這個時候我們可以選擇製作基礎的設計規範__仙剑奇侠传5dlc,比如柵格_获奖身份证、配色|--35彩票com、字體|暗灵猎手胡大刀、圖標規範等等-|钢坯成本。對於成熟期的產品來說-|csol防沉迷,大版本更新的周期是非常長的|意彩,這個階段通常會製作更為詳細的設計指南|--殷世航个人资料、設計原則_-艾派国历、do & don’t|||168彩票真的吗、品牌書|__仙剑5破解吧、圖標手冊等等_-qq游戏2011官方下载正式版。

三--_dota金箍棒、如何建立設計規範

電商類的產品對於大家來說都是比較熟悉的-_10665185是什么号码,就算不從事這個方麵--_苦雨孤灯,日常使用也會很頻繁_336时时彩网站,所以此次案例我們以下麵這個電商APP作為示範-|金螳螂 朱兴良。

做規範時通常會有這兩種情況---中博彩票平台源码:

1-_大英百科全书txt、不打算進行大版本更新的產品

對於小版本迭代的產品來說-|锡崖沟,建立規範隻需要在sketch裏把所有設計稿進行歸攏和分類-36选7开奖历史好彩三。直接根據現有的稿子梳理出規範_-深圳第一现场,再對不符合規範的文件進行調整即可--_心德维拉。

2_-成都到雅安多少公里、新版本 新規範

而對於需要做新版本並且建立新版本規範的產品來說_-|重庆万盛黑山论坛,在做設計稿之前-|_游彩客户端下载,我們就需要先統一一些基礎的內容_运盛娱乐网址,比如顏色--_腾格尔歌曲下载、字體-福建省组织机构代码网上服务平台、柵格等等|-模特李娟,然後在設計過程中去製作KIT|_新密五个人、對基礎的規範進行補充-__太原洗头房。

四|-大话腐女2、基礎規範

製定統一的柵格係統

因為現在都是一稿適配多端|--银膜,所以首先需要確定設計的基準尺寸--台湾杨帆,是基於iphone8|-2w彩票2m永久兔费资料?還是iphone 8P-01彩票真的能赚钱吗?或者1080*1920等等……每個公司設計稿的基準都不一樣_-_敌人的力量,我們是以一倍圖為基準進行設計的--怎么在淘宝网上开店,所以我這裏的基準尺寸就是375*667__武汉体育学院校园网,單位為pt--365彩票快3。

柵格一種情況是製定網格係統|-|淘宝体通缉令,網格係統的話首先要製定最小的設計單位|_|掌信彩是不是真的,比如淘寶的最小單位是3|_陈文恩,掌閱的最小單位是4|_步步为赢药膏功效,airbnb的最小單位是6……定好最小設計單位之後||云顶娱乐游戏4118,界麵中所有間距采用最小單位的倍數-_|众购彩票技巧。

假定我們最小單位4的網格--_注册老虎机存1送,排版時橫向和縱向的間距都是4的倍數|娱乐天地官方注册,比如8-||易彩集团、12__-30码期期必中特、24|17彩票。

第二種情況是可以直接建立橫向柵格係統-小学生美术作品,常用的是12柵格__|cba球员工资,12柵格比較好的地方是能夠同時被2|_数米基金、3__漫画大全之恋母性活、4整除|_能看cctv5的网络电视,因此能夠根據具體需求靈活的設計各種模塊__关于龙的对联。當然如果產品比較輕量化-_111彩票注册,是不需要這麼複雜的柵格的|--金黛尔,可以根據需求設置6_-龙炎电商、4甚至2柵格等等_|骂小佛。

2 色彩規範

色彩規範主要表明色彩的色值和使用範圍_|_阿米果,一般會從品牌色-易彩票投注是传销吗?、輔助色__众盈彩票能赚钱吗、基礎色-|038彩票有人用吗?、狀態用色等等_喜孕宝。如下圖所示--_优酷付费电影。

如果產品常用到漸變的話--_冯提莫被清晨潜了,需要注明漸變的角度以及漸變色的色值|_7k77k小游戏。包括產品如果有夜間模式的話|_22249平特肖,要額外注明日間和夜間模式下各個顏色的對應色值__-红地毯影城。當然這裏的夜間模式說的是真·夜間--_中兴彩票网是真的假的,而不是微博那種直接加一個黑色透明度蒙層的偽·夜間_-造梦西游3极品号源。

額外提一句|-抖音温婉百度云,重要內容和正文內容要保證文本的可識別度-_正点对时,WCAG指南中指出__金成真,文本和背景色的對比度需要達到3||-htcg13报价:1--_塞班5800论坛。大家可以通過

https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色--赢钱彩从哪下载。我這裏的品牌色和強調色對比度為3_|注册彩票送58彩金:1和6.3--_东莞一条龙服务流程:1_-|亿发彩票吧,而輔助顏色(比如標簽)的對比度則在2-3之間_-河南马桶解说。

3 字體

字體規範最需要注意的是提取出各個場景下需要用的字體和字號_|_娱乐天地客服联系不上。

需要注意的是|||有比我更帅的人,要標注上應用場景方便其他人理解||永胜国际是什么。不然其他成員也並不知道到底什麼時候應用一級標題|_-11选5在哪儿玩、什麼時候用二級標題_|_聂曦。

4 圖標

通常來說圖標分為兩種__长次郎,功能性圖標和展示性圖標|-刘钧个人资料。

功能性圖標是為了引導用戶理解和操作__能看cctv5的网络电视,需要表現精確和簡介-_诺基亚e72游戏下载,方便用戶識別其含義-__金丝蓉。功能性圖標常規狀態下為無彩色-|丽谯楼。

展示性圖標通常為頁麵入口-_张檬陈楚河,會有更多形狀__-1号平台登录、顏色--淘宝二手市场、質感的表達-|众发彩票注册,吸引用戶的注意力和點擊欲望||_雪铁龙c1国产,強調差異性_金陵十三钗小说结局,比如各種品類區的圖標_|雪乃纱恵、徽章-__马云投资云联惠5000亿、等級圖標等等-||仇岗勇士。

圖標規範通常來說會先定一些基礎尺寸|_-重庆建水上宫殿,梳理好各個頁麵的圖標尺寸--汗癣图片,進行整合_淄博豪哥健身俱乐部,最後確定好幾個基礎尺寸__2125火影世界,比如我這裏的基礎尺寸是4個___陈斌凯。功能層級一致的圖標尺寸要一致_-happy together fx。

為了保證不同形狀的圖標在視覺上保持大小一致|-_妖精的尾巴421,會製作一個圖標的基礎製作說明||旺拉虫草。製作說明裏會統一圖標的圓角-|西拉歌手、描邊的粗細-qq股票大赛;如果是涉及到展示性圖標的話_-_重庆援交网,還會有圖標的視角選擇_248彩票平台安全吗、配色的選擇|_105彩票手机登录、以及如何表現質感等等等等

5 默認圖

電商APP的話有大量的產品圖片|--注册网址需要什么,所以我們也把默認的占位圖樣式進行了統一|_135彩票禁止套现。因為我們這裏樣式都是一致的--众亿大厅作弊器,所以采用了統一的規範___掌信彩是正规的吗,如果有多種默認樣式_-运盛娱乐网址,或者有其他類型的占位圖_106福彩苹果下载,需要分別進行說明|_云顶娱乐网页能打开吗。

五|-2019年生肖卡、頁麵組件

頁麵組件通常包括導航欄||-江苏移动商城币兑换、工具欄__优乐彩彩票、彈框--_众博集团彩票、列表__|衣尚网、卡片||云顶娱乐每天送6元、空狀態等等-_-王俊凯死亡照片曝光,按照原子設計理念來說||外地车牌在北京,還可以把組件拆分為原子||36选7中注好彩3中奖、分子等更小的基礎設計組件-_莓文化,比如角標-|天津市武清区黑社会、標簽-_西餐团购、按鈕_|锦州有线宽带、圖像|-刺影辅助免费版、優惠券--苏州消防网、選擇器---杨幂被灌醉扒衣图、進度指示器等等

頁麵組件除了梳理出規範之外--_东北人解说麦迪时刻,通常會整理成一整套UI KIT--众赢彩票首页,保存為sketch文件日常拖拽使用_|天天快递价格,或者導入為Libraries直接調用---nba2k online修改器。當然_-丧尸李志讲的是什么,也可以直接在KIT上備注出規範和注意事項_|淘宝网开店教程,具體輸出什麼格式這個看團隊的需求即可|-塞班5800论坛。

因為組件部分是一個比較龐大的內容--我要一个身份证,需要根據具體產品

1按鈕

按鈕一般有懸浮按鈕-_优彩网址、填充按鈕_你有一封信 深圳卫视、線框按鈕和文本按鈕等類型-_-葫芦岛一高中家长汇。其中懸浮按鈕具有最高的優先級||nba2k online 外挂,屬於強引導型按鈕_|重庆ume官网。

按鈕通常會有三種狀態-|雪弗莱官网,常規狀態--132彩票官网注册用户名、點擊狀態和不可用狀態_-永盛娱乐。因此在規範中需要標明按鈕在這三種狀態下的樣式_双色球精准预测6十1,比如顏色重庆江北ume、投影_||306官方彩票靠谱吗?、圓角_-|银利半岛卡、文字大小等等

除此以外_||020彩票排名网站,也可能會有加載狀態-通成物流查询,也就是在點擊按鈕後_|-花都区教育局网,如果有1S以上的數據延遲|_众发娱乐怎么刷流水,通常會考慮觸發按鈕的加載狀態||_苏果之家。加載狀態的按鈕樣式為按鈕上顯示進度指示器_160官网彩票怎么下。

2 導航

對現有頁麵的導航進行收攏和分類-||快乐女生报名,比如我這裏分類為常規標題樣式|-|鹰彩平台、標簽樣式_|-欧式蒙牛奶粉事件、搜索框樣式_盈彩登录、無標題樣式__|网络电视 cctv5、字母導航……

標題需要注意文字的極限值|132彩票软件,ICON尺寸和位置的話要考慮最小可點擊區域_-赛罗奥特曼大电影,我這裏icon的尺寸設置為24pt_|-黎巴嫩邮编,但是熱區是44pt|-淘宝扫码,所以要注意間距的設置___106福利版苹果版下载,熱區不能重疊-_01彩票网页。

3 標簽

標簽通常有多個使用場景|_-24en,我們可以對標簽進行分組__|炫舞双开工具下载,比如運營類標簽_--新塑料球、內容屬性標簽||手工毛衣外套、篩選標簽等等

然後對每類的標簽統一樣式-_长沙市消防支队、文字內邊距以及說明適用場景-_磨条。

4 彈窗

彈窗是為了提示和通知用戶而位於頁麵內容之上的一種控件-_|家教老师h漫之全彩。它是引導用戶專注於某一項任務韩磊 摔婴,用戶可以通過操作來關閉彈框--仙剑奇侠传五破解。彈框包含模態(對話框|黄油笔、操作菜單)和非模態(toast|--英雄联盟定级赛规则、 snake bar等)兩種形式__-英烈寄语。

模態彈窗需要定義蒙層的樣式(顏色_|八仙绘、透明度)_|360彩票网购彩大厅官方,以及彈框內的文字說明和按鈕__-北华信集团。

我這裏拿一個對話框的規範進行舉例_-_青岛兔兔快运,這是一個無ICON的雙按鈕對話框|_|顺丰便利店,因此在這裏我們需要說明標題-现任国家领导人、正文文本_|-众发彩票合法吗、按鈕以及背景遮罩的信息||咖啡恋人攻略,還有字號-惧龟刷新时间、行距__-陈豪陈茵媺车震、文字極限值|__银利半岛卡、文字色-_-36选7开奖结果今天福建、按鈕的狀態等等……

除此之外||鱼精蛋白锌胰岛素,組件類的規範可以配上常用案例|_农牧盗匪、don’t&do-_众赢彩票投注,會更方便團隊人員理解_||苏州大润发官方网站,防止錯誤狀況_|-掌信彩平台导师视频。

5 列表

列表是由多個等寬的行組成的_||语文老师你的好紧嗯爽、按照一定規律排列的連續條目_|_钱多多的手机铃声。列表在一些資訊類產品裏會有更多的組合形式_-_陈丽华简历。我這款產品裏用到的列表主要是單行和雙行列表_|_汕尾台风网,那麼我們就整理出對應的列表類型和需要說明的事項-掌上购彩app。

六--qq炫舞极品宠物名字、結語

寫這篇文的初衷|协会工作计划,是因為從去年底我建立公眾號-__临泽公务网,並且在站酷發表了一些文章-宋老六,得到了很多人的認可|_盈彩在线贴吧。很多粉絲私信我各種問題-_-078彩票正规吗,陸續有人問我設計規範怎麼做||-诺基亚7070拆机视频、交互規範什麼樣之類的問題-|云顶至尊app。但是公司內部的文件確實沒有辦法公開分享_广汉刘勇,所以我就想說-_7k7k7小游戏大全,那不如專門寫一篇文章詳細教大家製作移動UI設計規範吧-_|李武荣。

這篇的基礎部分我做的比較詳細|_|178娱乐怎么样,組件部分寫的有些概括|_-当爱已成往事 亦域,主要是因為組件部分不是通用的|||银河赌博的网址,要根據自己的稿子進行整理和歸納_-_陈丹丹淘宝店,歸納好之後做好標注和規範說明即可--|春暖花开 亚洲,這部分是一個羅列的內容_-苏通大桥有多长,所以就不必展開了……

當然還有很多內容沒有展開說_-东海大地震,比如在Sketch裏把KIT製作成Libraries統一使用_-|青年中国说余佳文,但是我想作為一篇設計規範入門教程目前應該足夠了-|雪一片一片是什么歌,更多的內容我在後續開新文去補充吧||_吴迪女朋友王文静家世。

藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_--132彩票安卓版,為期望卓越的國內外企業提供卓越的UI界麵設計|_|234彩票网络平台合法吗、BS界麵設計 __陶银利、 cs界麵設計 -|林柏欣、 ipad界麵設計 -|-众彩国际送彩金、 包裝設計

標簽: ui 規範 « 移動端的dashboard設計也可以很好看哦 | 在這些大師身上|金銮殿的意思,我找到了非凡創意誕生的原因»


訂閱Rss