本內(nèi)容來源于:設計工廠;有需求的同學們收藏呀!關(guān)注本賬號,后續(xù)會整理更多干貨分享給大家

作為UI設計師,整理設計規(guī)范也是設計能力的一種體現(xiàn)。但很多小公司的設計師都覺得, 整個" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > UI設計規(guī)范是什么?

UI設計規(guī)范是什么?

時間:2024-02-12 08:25:01 | 來源:網(wǎng)站運營

時間:2024-02-12 08:25:01 來源:網(wǎng)站運營

UI設計規(guī)范是什么?:APP為何要制定設計規(guī)范

本內(nèi)容來源于:設計工廠;有需求的同學們收藏呀!關(guān)注本賬號,后續(xù)會整理更多干貨分享給大家

作為UI設計師,整理設計規(guī)范也是設計能力的一種體現(xiàn)。但很多小公司的設計師都覺得, 整個公司只有自己一個設計師, 所有的設計稿都是自己一個人做的, 風格肯定都是統(tǒng)一的, 所以沒必要花那么長時間去做一個沒有用的東西。

但其實規(guī)范的本身并不是只給設計師用的, 他更大的作用是對于整個團隊, 比如方便和開發(fā)之間的溝通, 幫助他們制作統(tǒng)一的組件, 以后用到的時候直接調(diào)用。

而對于設計師來說, 也不用重復做圖、重復標注, 改動一個的時候就能同步所有, 大大提高了工作效率。所以,無論是自己設計創(chuàng)作的階段還是和程序員溝通推動產(chǎn)品開發(fā)階段,你的設計規(guī)范是否完善,對產(chǎn)品的質(zhì)量起著決定性的關(guān)鍵作用。

在UI設計的過程中,設計規(guī)范是一個關(guān)鍵步驟。今天為大家整理了設計規(guī)范中的分類情況,UI設計規(guī)范有幾大分類組成,分別是:尺寸、標準色、字號、段落設置、圖標、圖片、間距、圓角值、大小、陰影、組件等。

1、尺寸

設計圖尺寸

雖說現(xiàn)在大多數(shù)人都是以750 (@2x) 為設計稿, 但是也還是有人720 (@2x) 的尺寸, 或是375 (@1x) 的尺寸, 比如我就是用的720,所以設計之初最先要定一個統(tǒng)一的設計尺寸, 特別是多個設計師合作的時候, 千萬不要想當然的以為別人都和你一樣。

間距大小

間距包括頁邊距、模塊與模塊之間的間距, 這種全局的間距大小必須要一致, 頁邊距的大小很好定, 基本上20、24、32居多, 根據(jù)產(chǎn)品特性定一個統(tǒng)一的就好。

而模塊與模塊之間的間距就相對復雜一點, 在定之前需要先確定模塊之間的分割方式, 是用線、還是面、還是留白, 然后再確定間距。

確定好模塊與模塊之間的分割方式后,還需要確定模塊內(nèi)部的,確定之后就要嚴格執(zhí)行。

比如規(guī)范定的模塊與模塊之間用線,模塊內(nèi)部之間用留白,那后續(xù)所有頁面都需要按照這個規(guī)則來(特殊情況除外)。

2、標準色

顏色是設計最重要的部分,沒有之一。細節(jié)決定品質(zhì),所以對顏色的運用格外細致,顏色的搭配直接決定產(chǎn)品的品質(zhì)感。包括基礎(chǔ)標準色(主色)、基礎(chǔ)文字色, 還應該包括全局標準色(背景色、分割線色值等)這些都需要標好色值以及使用的場景。

當顏色是漸變的時候, 也需要標清楚漸變的顏色。

對顏色值統(tǒng)一規(guī)范命名變量,提高開發(fā)效率的同時更好的維護設計規(guī)范。

在前端開發(fā)中,對顏色值進行編號,這樣對代碼也有著極大的優(yōu)化。定義一個設計規(guī)范的CSS樣式庫,開發(fā)過程中就不用重復修改CSS參數(shù)值,直接引用定義好的變量名就可以,這樣修改設計規(guī)范的成本大大降低。

3、字體

字體是設計中必不可少的考慮因素,不同的字體氣質(zhì)不一樣,并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果,然后在設計規(guī)范中注明。

在定義字體名稱的同時也定義了字體的風格,并且添加了不同字體風格的預覽效果,常見的字體風格有:Light、Regular、Italic、Semibold、Bold。

還有一點也不能忘記,那就是行間距,不管是一行文字還是多行文字,我們都需要標注清楚行間距,也就是行高,如果是段落的話還需要標注段落間距。

所以為了避免團隊的其他成員忽略了文字的行間距,我們需要在做規(guī)范的時候標明,所有文字必須注明行間距

4、段落設置

在實際的產(chǎn)品設計中,段落有很多種樣式,不同場景下的段落要求也不一樣。比如:閱讀內(nèi)容的段落要求文本可閱讀性強,所以對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不需要那么嚴謹,裝飾性強就可以。

需要注意的是:在定義段落默認字體的時候還需要定義一個后備字體,即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在于對細節(jié)的打磨,這也就是段落規(guī)范在設計中存在的意義。

5、圖標

圖標具體分為以下三個作用:

  1. 圖標是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標志和門戶。
  2. 圖標是網(wǎng)站形象的重要體現(xiàn)。
  3. 圖標能使受眾便于選擇。根據(jù)圖標大小和使用用途進行分類整理設計規(guī)范,這樣才更清晰明了。
在我們的項目緊急而人員又不足的時候, 可能沒有那么多時間,去把所有的圖標都畫的精細,那這個時候我們可以先定尺寸。

當然這里說的定尺寸不是讓你把頁面內(nèi)所有圖標的尺寸都定好,而是說優(yōu)先定幾個大的模塊,比如頂導航、底導航、個人中心的...







等后續(xù)空閑的時候我們再去細化這些圖標,開發(fā)也只需要換張圖, 不影響其他。

建議圖標尺寸盡量不要過多,比如32、36、40、48 都有, 這樣會顯得凌亂無序, 而且這些完全可以統(tǒng)一成兩個大小的, 比如32、48的。

因為圖標是可以有留白區(qū)域的, 也就說圖標本身大小可以是40, 但是切圖尺寸是48。

這樣做的好處就是圖標大小種類較少、方便記憶、也顯得專業(yè), 畢竟誰也不希望最后整理出來的規(guī)范, 32的圖標2個、36的圖標2個、40的圖標2個, 這樣孤零零的多慘, 所以建議圖標尺寸不要太多。

6、圖片

圖片包括 APP 內(nèi)出現(xiàn)的所有圖, 一般情況下都是產(chǎn)品圖和頭像, 但是需要注意的是在制定規(guī)范之前, 要先把圖片比例定好, 常見的比例有 1:1、2:1、4:3、16:9 等等,也是屬于設計規(guī)范最重要的部分之一,按照用途分類整理圖片資源,設計風格系統(tǒng)化。


然后再把每個模塊所用的圖片大小以及它的比例標清楚, 如果圖片有圓角度的話也需要注明。

頭像的尺寸可以定三個,大中小各一個,基本體量少的 APP 都夠用了。

建議 APP 內(nèi)的圖片比例兩到三個就好, 因為這涉及到后臺上傳, 比例不一樣的話, 要不然就是開發(fā)需要對圖片進行裁剪、要不然就是需要留不同的接口, 后期分別上傳, 無論哪一種,都是需要額外的人力成本, 所以不要給自己挖坑哦。

7、柵格系統(tǒng)

在設計的過程中,我們經(jīng)常會使用一套規(guī)范的度量標準,來保持產(chǎn)品的一致性,分別為圓角值、間距、大小。

對度量解釋最好的是設計中經(jīng)常使用到的柵格系統(tǒng)(Grid Systems),運用固定的格子設計版面布局,其風格工整簡潔。這就是我們在網(wǎng)頁和APP設計的過程中經(jīng)常使用到柵格系統(tǒng)的原因。

8、陰影

陰影風格及參數(shù)也是設計規(guī)范中的一部分,在整理設計規(guī)范的時候,需要注意的是陰影的參數(shù)值是網(wǎng)頁中控制陰影的參數(shù)值,而不是設計軟件中的參數(shù)值。

舉個例子:網(wǎng)頁中陰影對應的參數(shù)值為:

box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ,不透明度:10%,這才是程序員需要的陰影參數(shù)值,否則最終開發(fā)出來的陰影會出現(xiàn)不一致的情況,無法達到規(guī)范的目的。

9、導航

頂導航

高度、字體大小、顏色、有沒有分割線, 有的話分割線色值 ; 帶不帶圖標、多個圖標之間的間距等等。

底導航

底部導航和前面一樣,要放他默認和點擊效果圖標!

二級導航

主要是一些篩選類tab, 需要標明文字大小、色值、選中后的橫線的大小, 這里橫線的樣式目前常見的有兩種, 一種是固定的短線, 不管上面文字多少, 都是顯示一樣的大小; 還有一種是和文字一樣長的, 無論哪一種, 事先都需要定義一下規(guī)則。


10、組件

常用的UI組件(Component):Button控件、下拉框、選擇框(單選/復選框)、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數(shù)字步進器、選項卡等。

Button控件

按鈕是最常見的組件之一,按鈕有5個狀態(tài):Normal、Hover、Active、Disabled 、Loading。

需要在規(guī)范中分別羅列出這五個狀態(tài),標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度,按鈕文本大小、顏色值。如果是圖標按鈕的話,除了上述參數(shù)值以外還需要標注icon和按鈕文本之間的間距和icon圖標的大小。

下拉框

下拉框是為用戶提供多個選擇的單選組件,優(yōu)點是用最簡單的界面布局方式收納了很多的選項,需要注意定義下拉選擇框彈出的時候,鼠標移動上去的Normal、Hover、Active狀態(tài)。

選擇框(單選/復選框):

顧名思義,單選框是眾多選擇里面選一個,而復選框是眾多選擇里面可以無限制選擇。單選框和復選框都需要三個狀態(tài),即未選中狀態(tài)、選中狀態(tài)和不可點擊狀態(tài)。

時間選擇器:

時間選擇器是選擇年月日的組件,分別對應年月日星期的信息,在設計的時候需要考慮到4個狀態(tài),分別是:Select、Not_Select、Hover和Disable,并且寫進設計規(guī)范。

輸入框:

輸入文本框是我們軟件產(chǎn)品設計必不可少的組件,文本輸入框有4個狀態(tài):Normal、Active、Disable和Error。

搜索框:

和輸入框相同的地方是都需要聚焦然后輸入內(nèi)容完成操作,應該有為Normal、Active、搜索下拉狀態(tài)、Error狀態(tài)。




進度條:

這個需要在規(guī)范中注明上傳進度條的整個交互操作流程,對Normal狀態(tài)、點擊上傳/拖拽上傳狀態(tài)、上傳中、上傳成功、上傳失敗,整個流程狀態(tài)的整理。在上傳過程中,任何用戶操作都應該有及時響應的動作,這樣用戶在使用的過程中才不會迷茫。

分頁器:

分頁器是用于切換內(nèi)容頁面的復合組件,常規(guī)的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框,以及分頁器的4個狀態(tài):Normal、Hover 、Active、Disabled 。

提示框:

提示框是一個事件觸發(fā)彈出面板顯示的組件,經(jīng)常使用提示框的地方是,刪除按鈕、疑難問題點、提示類彈出信息等。這個風格設計就比較多了,設計風格各不相同,定義底板樣式、文字樣式和陰影參數(shù)。

警告框:

頁面報錯時的顯示樣式,常用的警告類信息是:操作成功、提醒用戶注意、警告用戶注意等。

表格:

表格類信息居多,應重點整理表格樣式以及文本顏色大小。

彈出面板:

彈出面板主要由4個部分組成,分別是面板內(nèi)的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。

數(shù)字步進器:

數(shù)字步進器屬于復合類型的組件,可以理解為按鈕和輸入框聯(lián)動的組件,所以輸入框和按鈕擁有的屬性狀態(tài),步進器都有。

選項卡:

切換選項卡即切換內(nèi)容,和下拉選擇框不同的是,選項卡是將多個選項都排列出來的單選組件,需要考慮4個狀態(tài):Normal 、Hover 、Active 、Disabled 。

設計規(guī)范對整個項目的規(guī)范性推動很強大,但是需要花時間和耐心細心打磨,所以需要花費很多時間和精力去整理資料、編輯素材、分類整合,最后還要在設計軟件中將整個規(guī)范重新排列設計。

最后

在文章的最后送大家?guī)追軺I視覺規(guī)范參考,因為平日總有一些會員和粉絲跑來要,一時間也很難找到,這個過程想必大家深有體會,猶如你等車一樣,不等時一輛接一輛,等時苦苦等不到,今天車來了,就看你上不上了!















關(guān)鍵詞:規(guī)范,設計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉