Ui詳細教程有哪些?
先送上課程
址:https://pan.baidu.com/share/init?surl=a0wieVuUP99hysh3eZPuFg 提取碼:j87g————————————————————————————————課程來之不易,希望各位動手點個贊,評論下!
還有一套 [像素范兒] UI設計全能班第一到第五期 需要的 私信
為什么需要設計語言
對內
上圖,應該是很多設計團隊都遇見的情況,一個按鈕很多尺寸,顏色,大小,有時候我們已經有了規范,但是由于業務方各種要求,要個性化,要不一樣,導致整個APP設計變的很混亂,這是我們設計中經常遇見的,很多APP因為缺少基礎規范,導致APP界面每個頁面都不一樣,設計師都是按照個人的主觀經驗做設計,導致風格層次不齊,缺乏統一性,所以對內,很多時候設計語言是為了解決統一性和效率為前提下,避免開發工程師重復開發一些組件。
對外
對外,統一的品牌符號,品牌特征,有助于加深產品在用戶心中的印象,統一的顏色和交互形式能幫助用戶加深對產品的熟悉感和信任感,一個好的設計語言本身可以在體驗上為產品加分,試想一下,當你走進星巴克的時候,發現LOGO變了,咖啡的包裝換了,是不是會覺得是山寨的感覺,就好比漢堡XX,雖然都是同樣的薯條漢堡,但是總感覺是山寨,好的品牌規范,能夠更好創見一致性的體驗。
設計語言解決什么問題
一致性
在整個平臺中創造一致性,顏色、按鈕、字體、品牌一致性,給用戶安全感與熟悉感,同時解決設計師因為個人特征導致界面不統一問題。
明確設計原則
讓每一個設計師很清楚的知道,我們產品需要傳遞給用戶的設計特征和原則是什么,以及整個平臺的約束是什么,比如我們平臺特征是年輕,活潑,那么我們有對應的設計規范,比如圓角按鈕,漸變色。設計師就得在這個約束下去進行設計,就不能設計成直角或方正的圖形,因為和整個設計原則不匹配。
效率
提升效率,對于一些我們經常用到的組件、顏色、分割線、按鈕、圖標、字體、tab、表單等組件,如果提前設計統一好,能大大減少重復性設計,能讓設計師更加專注在設計品質上加強,提升效率,對于基礎的顏色、字體、間距可以提前開發好,減少重復性開發。
多平臺統一
我們現在處于一個各種設備的時代,各種屏幕尺寸,平板電腦,筆記本,各種安卓機器,各種廠商自定義的系統等等,我們的設計需要在這些平臺上運行,就必須保證設計的統一性。
設計語言包含哪些內容
前面我們已經說了,設計語言的重要性以及設計語言解決了什么問題,那么到底設計語言里面應該包含哪些內容,我們應該如何去定義這些內容呢?
1.設計原則
Airibnb在建立他們設計語言之前,先根據整個產品公司定位,價值觀,先得出他們整一個設計語言的關鍵詞:
統一:每個設計應該是統一的,不能有太多個性差異化的特征;
關于內容:用戶應該更多關注的是內容,而非設計本身;
確定的:在設計中減少不確定的因素,和預期。
同樣的,在facebook的設計原則語言里面,也首先強調了他們的設計價值觀:通用,人性,干凈,統一,有用,快速,透明,在facebook所有設計中,都圍繞這幾個點去作為他們設計指導準則。
蘋果設計規范,建議每一個接觸UI的同學都應該去學習,蘋果的設計規范包括:完整性,一致性,直接操作,反饋,隱喻,用戶控制等。
所以我們在建立一個設計語言的第一步,先應該建立一個設計準則,關于設計準則如何定義,我會在后面的文章里面和大家詳細講解。
2.色彩系統
設計中三大元素,色彩,字體,圖形,那么第一步我們在建立一個系統時候,色彩是很重要一部分,我們需要定義好我們整個系統的色彩架構體系,色彩體系一旦建立好,后面我們的設計都將圍繞這些色彩進行設計,色彩包括:品牌色、輔助色、字體黑白灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色等等。
▲ 主色盤
▲ 輔助色盤
▲ 色盤延伸
3.圖形
▲ 圖形,設計中很重要元素之一,我們插畫風格圖形如何定義,圖標,背景圖形都屬于圖形一部分。
▲ 插畫在設計運用類型有幾種,比如atlassian對于他們插畫類型進行了規范,插畫需要有隱秘和故事性在里面,插畫必須有構建的感覺,定義了人物特征以及顏色規范。
▲ 包括對于空白頁圖形定義
▲ 對圖標風格定義,包括色彩關系
▲ 對于頭像,定義了有五官和無五官風格定義
▲ 包括整個規范的正確示范和錯誤示范等等
▲ 圖標規范等等
4.柵格系統
柵格是為了保證頁面中更好的布局,保證布局統一性。
柵格系統里面又分最小單位和間距,在airbnb中對于間距,他們運用了8的倍數,所有的規范都是很有彈性的,8,16,24,48,64來建立。
▲ 網格系統中的列,也有叫欄
▲ 網格系統中的行
▲ 網格系統中的水槽
▲ 網格系統中的邊距
5.字體
界面中出現最多的內容字體,字體除了傳統意義上大小之外,還有字間距、行間距、字重對比、字體顏色等等,后面系列文章中,我會詳細告訴大家如何定義字體。
▲ 字重,顧名思義就是字體粗細,通過字重可以加強層級
▲ 字體大小以及運用場景,字體在界面中什么樣場景運用多大字號,以及對應的字間距,行間距等等都是需要我們去定義的。
▲ 字體顏色,什么時候用品牌色,成功,錯過,超鏈接出錯等等各個狀態的顏色如何去定義,后面文章我會詳細說明。
6.投影
在設計系統中我們需要定義好投影關系,投影需要去定義不同的強度大小,以滿足頁面中需要,一般通過透明度,以及投影遠近來定義。
7.圖文關系
圖片和文字在界面中如何處理,多色調如何運用,黑色圖片上放文字怎么處理,白色圖片放文字如何處理都是需要我們去詳細定義的。
總 結
設計一套設計語言是一個很復雜的過程,前期一般需要比較資深的的設計師來完成,設計完成后,對于基礎的顏色,字體不要經常變動動,成本會比較高,至少需要保證這些基礎元素,一年內不要頻繁變動,今天和大家分享的只是一個大概框架,后續我將會拆解里面每個模塊,逐步和大家分享如何去設計一個語言。
址:https://pan.baidu.com/share/init?surl=a0wieVuUP99hysh3eZPuFg 提取碼:j87g————————————————————————————————課程來之不易,希望各位動手點個贊,評論下!