哪些讓UI設計師相見恨晚的設計規范!

UI設計教程   /  UI教程     

載體FVV
UI設計師 / 貴州 遵義

來源:UI設計精選   作者:載體FVV


設計語言,貌似很火的一個詞,無論是國內大的團隊還是小的團隊,都需要做設計規范,好像沒有就不夠專業,UED的價值就不夠高,關于設計語言的參考也特別多,最出名的莫過于蘋果和谷歌,也是設計語言的鼻祖。


為 什 么 需 要 設 計 語 言 ?


對內



上圖,應該是很多設計團隊都遇見的情況,一個按鈕很多尺寸,顏色,大小,有時候我們已經有了規范,但是由于業務方各種要求,要個性化,要不一樣,導致整個APP設計變的很混亂,這是我們設計中經常遇見的,很多APP因為缺少基礎規范,導致APP界面每個頁面都不一樣,設計師都是按照個人的主觀經驗做設計,導致風格層次不齊,缺乏統一性,所以對內,很多時候設計語言是為了解決統一性和效率為前提下,避免開發工程師重復開發一些組件。

【更多UI設計知識請關注:UI設計精選】

對外

對外,統一的品牌符號,品牌特征,有助于加深產品在用戶心中的印象,統一的顏色和交互形式能幫助用戶加深對產品的熟悉感和信任感,一個好的設計語言本身可以在體驗上為產品加分,試想一下,當你走進星巴克的時候,發現LOGO變了,咖啡的包裝換了,是不是會覺得是山寨的感覺,就好比漢堡XX,雖然都是同樣的薯條漢堡,但是總感覺是山寨,好的品牌規范,能夠更好創見一致性的體驗。


   設 計 語 言 解 決 什 么 問 題?    


一致性


在整個平臺中創造一致性,顏色、按鈕、字體、品牌一致性,給用戶安全感與熟悉感,同時解決設計師因為個人特征導致界面不統一問題!靖郩I設計知識請關注:UI設計精選】


明確設計原則





讓每一個設計師很清楚的知道,我們產品需要傳遞給用戶的設計特征和原則是什么,以及整個平臺的約束是什么,比如我們平臺特征是年輕,活潑,那么我們有對應的設計規范,比如圓角按鈕,漸變色。設計師就得在這個約束下去進行設計,就不能設計成直角或方正的圖形,因為和整個設計原則不匹配。


效率


提升效率,對于一些我們經常用到的組件、顏色、分割線、按鈕、圖標、字體、tab、表單等組件,如果提前設計統一好,能大大減少重復性設計,能讓設計師更加專注在設計品質上加強,提升效率,對于基礎的顏色、字體、間距可以提前開發好,減少重復性開發。


多平臺統一



我們現在處于一個各種設備的時代,各種屏幕尺寸,平板電腦,筆記本,各種安卓機器,各種廠商自定義的系統等等,我們的設計需要在這些平臺上運行,就必須保證設計的統一性。


   設 計 語 言 包 含 哪 些 內 容  ?


前面我們已經說了,設計語言的重要性以及設計語言解決了什么問題,那么到底設計語言里面應該包含哪些內容,我們應該如何去定義這些內容呢?


1.設計原則


Airibnb在建立他們設計語言之前,先根據整個產品公司定位,價值觀,先得出他們整一個設計語言的關鍵詞:

統一:每個設計應該是統一的,不能有太多個性差異化的特征;

關于內容:用戶應該更多關注的是內容,而非設計本身;

確定的:在設計中減少不確定的因素,和預期。

【更多UI設計知識請關注:UI設計精選】


同樣的,在facebook的設計原則語言里面,也首先強調了他們的設計價值觀:通用,人性,干凈,統一,有用,快速,透明,在facebook所有設計中,都圍繞這幾個點去作為他們設計指導準則。




蘋果設計規范,建議每一個接觸UI的同學都應該去學習,蘋果的設計規范包括:完整性,一致性,直接操作,反饋,隱喻,用戶控制等。


所以我們在建立一個設計語言的第一步,先應該建立一個設計準則,關于設計準則如何定義,我會在后面的文章里面和大家詳細講解。


2.色彩系統



設計中三大元素,色彩,字體,圖形,那么第一步我們在建立一個系統時候,色彩是很重要一部分,我們需要定義好我們整個系統的色彩架構體系,色彩體系一旦建立好,后面我們的設計都將圍繞這些色彩進行設計,色彩包括:品牌色、輔助色、字體黑白灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色等等。


▲  主色盤


▲  輔助色盤



▲  色盤延伸


3.圖形


▲  圖形,設計中很重要元素之一,我們插畫風格圖形如何定義,圖標,背景圖形都屬于圖形一部分。


▲  插畫在設計運用類型有幾種,比如atlassian對于他們插畫類型進行了規范,插畫需要有隱秘和故事性在里面,插畫必須有構建的感覺,定義了人物特征以及顏色規范。


▲  包括對于空白頁圖形定義


▲  對圖標風格定義,包括色彩關系


▲  對于頭像,定義了有五官和無五官風格定義


▲  包括整個規范的正確示范和錯誤示范等等


▲  圖標規范等等


4.柵格系統


柵格是為了保證頁面中更好的布局,保證布局統一性。



柵格系統里面又分最小單位和間距,在airbnb中對于間距,他們運用了8的倍數,所有的規范都是很有彈性的,8,16,24,48,64來建立。


▲  網格系統中的列,也有叫欄


▲  網格系統中的行


▲  網格系統中的水槽


▲  網格系統中的邊距


5.字體


界面中出現最多的內容字體,字體除了傳統意義上大小之外,還有字間距、行間距、字重對比、字體顏色等等,后面系列文章中,我會詳細告訴大家如何定義字體。


▲  字重,顧名思義就是字體粗細,通過字重可以加強層級【更多UI設計知識請關注:UI設計精選】


▲  字體大小以及運用場景,字體在界面中什么樣場景運用多大字號,以及對應的字間距,行間距等等都是需要我們去定義的。


▲  字體顏色,什么時候用品牌色,成功,錯過,超鏈接出錯等等各個狀態的顏色如何去定義,后面文章我會詳細說明。


6.投影


在設計系統中我們需要定義好投影關系,投影需要去定義不同的強度大小,以滿足頁面中需要,一般通過透明度,以及投影遠近來定義。



7.圖文關系


圖片和文字在界面中如何處理,多色調如何運用,黑色圖片上放文字怎么處理,白色圖片放文字如何處理都是需要我們去詳細定義的。



   總 結   

設計一套設計語言是一個很復雜的過程,前期一般需要比較資深的的設計師來完成,設計完成后,對于基礎的顏色,字體不要經常變動動,成本會比較高,至少需要保證這些基礎元素,一年內不要頻繁變動,今天和大家分享的只是一個大概框架,后續我將會拆解里面每個模塊,逐步和大家分享如何去設計一個語言。


———— / END / ————

編輯:小冊子

您設計中的那本小冊子!




往期精彩推文:

何為視覺出軌了??

新手小白轉行做設計要避免哪些坑?

UI設計與平面設計區別真大!看完你會學哪個?

UI設計師月薪從5千到3萬的秘密!

【新手必看】為什么自學UI設計的人95%都學不會??

【課程介紹】UI設計全能實戰就業班!

【修圖教程】新手PS也能調出模特質感膚色效果

【UI設計】學員學習筆記欣賞

【更新啦】PS全套基礎教程視頻,增加PS案例進階視頻



 收藏
闪电之神电子 台湾宾果pc28是不是正规的 欧美视频毛片在线播放 股票预测软件 如何在网络上赚钱 5分快3骗局会不会把你卡里的钱转走 广东快乐10分钟交流群 安徽省十一选五一定 日本女优最大色情 浙江20选5要中几个 怎样在网上赚钱 南粤36选7好彩3奖金多少 开元棋牌辅助器 大庆麻将手机版下载 江苏快3走势图定牛 江西11选5全天计划 重庆时时彩开奖官网