打卡第十四天-UI設計規範總結

做界面要遵循:

1.操作平臺設計規範

2.公司的設計規範

3.產品內設計規範

首先要確定目標用戶、用戶目標、設計目標後,再進行設計執行。下圖借用一下騰訊雲的整理規範:


1.圖標規範

圖標與品牌標誌一樣,在設計時都需要做適當的減法,應該儘量用簡約的線條去表達其含義,應該儘量避免出現線條結構過於複雜的設計,而且整體的圖標都需要保持風格一致,例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格等等。

a.像素對齊

需要嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時,否則最終的顯示效果就會出現問題。

b.用布爾運算

在做圖標的時候,能用基本圖形進行布爾運算的時候,儘量不要使用鋼筆,這樣做的好處可以讓圖標更加規範,對圖形結構理解更加深刻,而且後期更改形狀會更加方便

c.獨特的風格

在做系列圖標的時候,前期一定要給圖標設定一個風格及原則,使之看起來與衆不同。在這裏值得一提就是,我們在做線性圖標時,一定要保證描邊粗細相同、圓角相同,如果這些基礎的規則都沒有遵循,那也就談不上風格的統一、創新了。

d.視覺大小統一

在進行圖標設計的時候,我們會使用柵格輔助線來幫助我們更加嚴格謹慎,但一定不要被輔助線困住,學會靈活運用,保持視覺上的大小統一。在圖標的設計中,我們也必須要有品牌意識。簡單的說就是把品牌中的抽象的概念變成具象化的圖形,把品牌主副色調應用到圖標設計中。同時建議大家每個星期完成一個主題的作品,提升自己的平面設計能力。

2.標註規範

因爲導航欄和標籤欄通用性非常強,需要單獨拿出來進行統一標註,這裏我們只對內容區來進行標註示例。

a.尺寸

注意有圓角的地方,需要將圓角半徑標出。

對於一些控件,如button、列表,一定要隨時問自己有沒有特殊狀態,如按壓狀態、無效狀態、選中狀態等等,如果你不標明,開會就會默認沒有這些效果。

一般情況下,圖片的尺寸是需要告訴比例的,而不是固定的大小,這樣開發才能更好的適配,常用的圖片比例有4:3、16:9等。要理解適配的原理,不要將一些控件給出固定的尺寸大小,如果你將這個按鈕的寬度和高度都標註出來,開發就會將這個按鈕的大小寫死,一旦遇到屏幕(白色區域)較寬的時候,按鈕還是固定大小,就會影響視覺效果。

所以正確的標註方法是給出按鈕兩邊的間距,讓整個按鈕的寬度自適應(當然高度還是要固定的),這樣不論遇到哪種分辨率的尺寸,都能夠保持相同的視覺效果,擴展性極強。



b.文字

需要標註文字的大小、字體、顏色、透明度、行高等等,當然也可以和開發進行溝通,對一些內容進行刪減。關於文字的標註需要注意的事項:文字有一個很特殊的屬性,就在某些場景下,文字是動態的,所以這個時候,就需要將極限情況考慮清楚。表面上我們將標題文字的大小、顏色這些內容標註清楚就可以了,但是如果標題文字過多的時候該怎麼處理呢?所以必須要給出一個極限情況的規範,比如最多顯示多少個字符,字符超過極限值就用打點的方式處理。



c.間距

間距和尺寸有些相似,但其實它們有着很大的不同,我們可以這樣理解:尺寸是形容容器的大小,而間距是形容容器之間的距離。間距相對比較簡單,只要標註清晰就不會有太大問題

d.顏色

需要標註顏色的內容有分割線顏色、背景色、按鈕顏色等等。關於顏色的標註需要注意的事項:切記文字的顏色已經歸類到文字屬性裏面,不用重複標註,思路一定要保持清晰。

3.命名規範

統一的、規範的命名對我們自己的文件整理有很大的幫助,後期修改文件、圖層的時候更加方便快捷,而且規範的命名也顯得我們自身比較專業。而且,如果如果命名不統一,團隊之間的成員很難達成共識,任務交接時需要很大的學習成本。有規範的命名可以極大的節省程序開發的時間成本,減少很多不必要的溝通與重複切圖的概率。程序員完全可以直接使用的我們切片而不更改切片的名稱,後期我們更換切圖,只要切片名稱不變,開發直接替換就可以了。

a.所有命名全部爲小寫英文字母

b.命名格式

一個大型項目會分很多模塊,每個模塊由不同的設計師來獨立完成,還有人會專門管理公共的組件,如tabbar、navbar等等,這種情況下就會分爲兩種切圖,一種是通用類型的切圖,還有一種就是各個模塊特有的切圖。

通用切片命名格式:

組件_類別_功能_狀態@2x.png


舉例:[email protected](對應中文:標籤欄_圖標_主頁_默認@2x.png)


模塊特有切圖命名規則:


模塊_類別_功能_狀態@2x.png


舉例:[email protected](對應的中文爲:郵件_圖標_搜索_默認@2x.png)


我們的原則就是清晰的表達出切片的具體內容並且沒有重複的名稱。(要注意,命名中不能含有空格)

c.常用英文單詞

如果所有命名都寫爲全稱,名字就會特別長,所以我們可以將一些常用的英文單詞進行縮寫,減少工作成本與開發代碼資源。至於怎麼縮寫,只要整個團隊能夠達成共識並且輸出一份縮寫清單,任何縮寫規則都是可以的。

下面提供一些常見的:

bg(backgrond 背景)

nav(navbar 導航欄)

tab(tabbar 標籤欄)

btn(button 按鈕)

img(image 圖片)

del(delete 刪除)

msg(message 提示信息)

pop(pop up 彈出)

icon(圖標)

selected(選中)

disabled(不可點擊)

default(默認)

pressed(按下)

back(返回)

edit(編輯)

content(內容)

4.交互規範

簡化操作:能一步完成的交互就不要分兩步。

用戶習慣:大部分用戶都有固化思維,我們作爲設計師應該尊重數據,尊重用戶選擇。

減少干擾:減少界面元素的不確定因素,方便用戶快速找到自己想要的。

快速響應:加快用戶讀取的響應速度,能夠避免從遠程取數據的,就儘量避免。

界面友好:除了根據需求提供視覺解決方案以外,在設計的過程中適當地加入一些小細節使交互界面更加友好是設計師的職責所在。


5.圖片處理規範

a.圖片統一性

1)圖片色調色溫需統一,例如一個嬰兒產品的首頁,整體需要搭配暖色調的圖片,這樣看上去整體才比較統一舒服。

2)圖片比例需統一,例如一個賣貨的產品詳情頁,在同一屏的欄目中(頁面)所出現的產品或者人物,比例就需要有一個統一的大小比例,這樣看上去才比較統一舒服。

b.圖片細節處理

1)圖片精度不夠(這裏所說的精度不是說DPI分辨率需要300哦,那是做高精度印刷輸出時才需要的。而在電腦及手機上的圖片DPI分辨率爲72即可,另外輸出圖片時需適當壓縮一下圖片的大小)、雜色太多可以使用PS內置的CR濾鏡處理。

2)圖片尺寸建議統一爲偶數值,方便前端技術人員開發。

3)圖片邊緣避免與白色背景融合,可以在邊緣位置加色。

4)爲了配合標題字體,圖片可以局部調亮或調暗。

6.動效規範

會做點動效會給我們加分不少,尤其是做一些加載動畫,這是我們經常會遇到的需求。

1)不論你的動畫有多好看、多吸引眼球,如果成本太高或者過於複雜都是無法落地的,所以我們要遵循簡單實用的原則來進行設計,千萬不要過度設計。


2)任何交互動作所導致的狀態都需要考慮正常狀態與異常狀態。


拿加載動畫來說,我們需要考慮加載成功的反饋與加載失敗的反饋,並將之註明在輸出規範中。


3)動效使用的工具:可以PS做一些動態表情,用AE做一些加載動畫,頁面之間的交互動效可以使用Flinto、Principle等。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章