視覺規(guī)范（視覺規(guī)范手冊）

大家好！今天讓小編來大家介紹下關于視覺規(guī)范的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、網(wǎng)頁ui設計流程

• 2、如何做一個優(yōu)秀的UI設計師呢？

• 3、淘寶視覺設計規(guī)范30%原則是什么意思，5%吊頂，5%底部各是指什么，是寬度的的百分比還是高度的百分比？

• 4、品牌包裝視覺規(guī)范 怎樣翻譯成英文專業(yè)術語，英文高手幫幫~

一、網(wǎng)頁ui設計流程

1.產(chǎn)品需求分析

當產(chǎn)品經(jīng)理給出一個產(chǎn)品的需求，我們首先需要對這個產(chǎn)品進行一個大致的分析，分析這個產(chǎn)品的方向，定義產(chǎn)品的用戶群體及特征；

2.深層次的用戶體驗研究與分析

這個時候我們就要對已定義的目標用戶群體及特征進行深層次的剖析，包括目標用戶群體的年齡，性別及目標戶群體的一些情感習慣，心理特征等，這樣我們就可以有針對的對這個產(chǎn)品構想設計出一個大概的色系搭配及元素控件設計；

3.初稿設計

這個時候我們就可以把產(chǎn)品經(jīng)理的原型需求和自己對產(chǎn)品的體驗研究分析結合起來設計初稿。（大概的色系搭配，框架布局，元素控件，圖標ICON等設計都可以在這一步呈現(xiàn)出來）

4.視覺規(guī)范設計及細節(jié)優(yōu)化設計

初稿設計完成了，產(chǎn)品大概的樣子都出來了，接著我們就是要做好視覺規(guī)范設計及細節(jié)優(yōu)化設計。視覺規(guī)范設計就是要對整個產(chǎn)品的顏色，字體，字號，元素控件，圖標ICON，間距及交互效果做個統(tǒng)一的規(guī)范，這樣才可以做出一個成熟的產(chǎn)品，對前端制作也是有很大的好處的。

接著就是細節(jié)的優(yōu)化設計了，這個我們就要細心的做好細節(jié)上的設計，比如一些對齊，間隙，圖標虛邊，線條像素，模塊陰影等等；

5.跟進前端工程師實現(xiàn)設計效果

設計稿完成了接下來就是前端工程師制作了，這時我們就不要以為我們的工作完成了，我們要繼續(xù)跟進前端工程師實現(xiàn)還原我們的設計效果，有必要我們可以設計出一份交互圖出來，這樣便于他們更好的更準確的更快捷的實現(xiàn)我們的設計；

6.產(chǎn)品體驗

當前端制作好頁面之后，我們就可以對整個產(chǎn)品做一個線上的體驗，界面體驗，交互體驗，當遇到一些體驗不好的地方我們可以直接和產(chǎn)品還有前端工程師進行溝通，共同來商討解決這些問題；

7.產(chǎn)品的持續(xù)用戶體驗跟進研究與優(yōu)化

產(chǎn)品上線之后，我們要持續(xù)關注與跟進它，進行一些用戶體驗數(shù)據(jù)的收集，對于界面上和交互體驗上的一些不是很理想的地方做一個收集，用在下期的改版上；

二、如何做一個優(yōu)秀的UI設計師呢？

一、兩道思維

很多 UI 拿到一個頁面原型的時候，就立馬打開各大設計網(wǎng)站找參考，然后照著參考頁面上的效果，生搬硬套到原型上，這只是達到了單純美化頁面的效果。

那么拿到原型后應該帶著怎樣的思維來進行思考呢？

第一道思維：交互思維

先了解頁面實現(xiàn)什么功能，功能的交互操作流程是怎樣的，也就是說用戶操作這個頁面上的功能時，用戶的行為路徑是怎樣的。

第二道思維：視覺思維

了解完功能、交互后，提取原型中視覺組成元素，細分歸類，每一類應用統(tǒng)一性原則進行設計。

然后交互與視覺一同結合來設計界面。

二、思維應用

結合案例我們來看下兩道思維是如何進行的。

第一道思維：交互思維

了解功能交互流程。

根據(jù)實例原型分析出用戶行為路徑：

用戶行為路徑：

注意點：

用戶行為路徑的獲取，一定要跟產(chǎn)品經(jīng)理、交互設計師進行溝通確認清楚。

用戶行為路徑某些步驟中，也有先后之分，比如第1步中，用戶輸入了賬戶地址后，才會有賬戶的相關數(shù)據(jù)顯示。

用戶行為路徑可以支撐信息內(nèi)容進行歸類分組。

第二道思維：視覺思維

提取視覺組成元素。

視覺元素：

注意點：

提取視覺組件元素盡量詳細歸類。

如有視覺規(guī)范，視覺組件元素風格應用請遵循視覺規(guī)范。

如無視覺規(guī)范，同類視覺組件元素應用統(tǒng)一性原則進行設計。

三、檢驗方案

我們帶著兩道思維來檢驗一下這位設計師輸出的方案：

問題1：交互層級

問題所在：

數(shù)據(jù)顯示在前，輸入在后，交互操作層級有點混亂。

問題截圖：

問題解決：

用戶行為路徑中，第1步有個先后順序，先輸入地址，后顯示數(shù)據(jù)，在進行信息內(nèi)容布局設計的時候同樣需要有先后順序，所以交互操作層級一定程度上影響著布局排版。

問題2：步驟關聯(lián)

問題所在：

「批量轉賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點不通暢。

問題截圖：

解決方案：

用戶行為路徑中，用戶核心費用信息后，最有可能的行為就是點擊「批量轉賬」按鈕，所以「批量轉賬」按鈕與轉賬費用信息的操作關聯(lián)性比較大，應該在同一模塊里會更符合交互操作邏輯。

問題3：顏色應用

問題所在：

主色、點綴色、輔助色各自的應用范圍沒有規(guī)則，顏色應用混亂。

問題截圖：

問題解決：

一個頁面或者項目中，各種顏色的應用范圍需要有一定規(guī)范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應的使用規(guī)則。

問題4：輸入控件

問題所在：

輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會造成用戶交互操作上的認知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，輸入類組件樣式應用統(tǒng)一性原則，保持視覺風格一致，從而減少用戶操作認知偏差。

問題5：按鈕樣式

問題所在：

按鈕樣式應用到不具備按鈕點擊屬性的對象上，用戶會認為也是可點擊，會造成用戶交互操作上的認知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認知偏差。

舉個例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認知偏差。

問題6：信息展示

問題所在：

同類信息內(nèi)容的展示存在多樣式，傳達過程中加重了用戶的認知負擔。

問題截圖：

問題解決：

一個頁面或者項目中，同類信息內(nèi)容的展示應用相似性原則保持視覺風格一致，因為相似性的布局可以更加高效地傳達信息。

舉個例子：電商頁面，金額信息展示；理財頁面，收益信息的展示；都是應用相似性的布局，即統(tǒng)一又高效地傳達信息。

問題7：圖標風格

問題所在：

圖標風格不一致，圖形反白風格，立體風格，線性風格。

問題截圖：

問題解決：

根據(jù)產(chǎn)品的特性，建議統(tǒng)一的圖標風格，選擇線性、面性、漸變、立體等風格。

問題八：對齊間隔

問題所在：

頁面元素的對齊、間隔沒有規(guī)律，整體視覺顯得松散，不嚴謹。

問題截圖：

問題解決：

可以利用柵格系統(tǒng)，把頁面信息內(nèi)容規(guī)整起來。

四、優(yōu)化方案

根據(jù)發(fā)現(xiàn)的問題，我們來看一下優(yōu)化后的設計方案：

優(yōu)化1：交互路徑

根據(jù)用戶行為路徑，將相關聯(lián)的信息歸類到一個模塊，每個步驟劃分到一個模塊，相關聯(lián)的步驟合并到一個模塊，模塊內(nèi)完成各自的操作展示任務，模塊之間信息內(nèi)容互不干擾，但從結構布局又能夠形成符合交互操作邏輯。

優(yōu)化2：顏色規(guī)范

規(guī)范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3：輸入控件

對輸入類控件的樣式進行了統(tǒng)一，讓用戶從視覺上就能夠清楚地分辨出哪些是可以進行輸入操作的，從而減少用戶對交互操作上的認知成本，提高信息輸入效率。

輸入控件進行交互時，要有交互狀態(tài)反饋，默認狀態(tài)、選中狀態(tài)、錯誤狀態(tài)。視情況而定，可以增加鼠標移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時的顏色應用，可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4：按鈕規(guī)范

對按鈕進行了分類，分為常規(guī)按鈕、圖標按鈕、文字按鈕；對按鈕樣式用顏色進行了統(tǒng)一；按鈕要有交互狀態(tài)反饋，不可點擊狀態(tài)、可點擊狀態(tài)、鼠標移上狀態(tài)、鼠標按下。

狀態(tài)變化時的顏色應用，可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5：信息展示

對信息內(nèi)容應用相似性原則進行了排版的統(tǒng)一處理，每個小類信息的標題與內(nèi)容采用統(tǒng)一排版格式，然后重復應用，有助于提高信息獲取效率。

優(yōu)化6：圖標風格

這里的圖標應用于功能性圖標，統(tǒng)一采用線性圓角風格。功能性圖標需要注意圖標的形狀要能夠正確有效地傳達出功能的含義。

優(yōu)化7：對齊間隔

應用柵格系統(tǒng)對視覺元素之間的對齊、間隔進行調(diào)整，使頁面視覺更加嚴謹，頁面信息更容易閱讀。

五、總結

交互思維

了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內(nèi)容進行歸類分組提供依據(jù)，最終有助于頁面信息內(nèi)容的排版布局。

視覺思維

提取視覺組成元素，對顏色、文字、控件、圖標等每一類應用統(tǒng)一性原則進行規(guī)范設計，再通過視覺元素本身相互組合，最終應用回信息內(nèi)容上，建立規(guī)范的視覺感。

設計一個頁面，交互思維和視覺思維是互相配合的，缺一不可，最終都是為了共同去構造符合交互操作邏輯、滿足視覺美感的界面。

三、淘寶視覺設計規(guī)范30%原則是什么意思，5%吊頂，5%底部各是指什么，是寬度的的百分比還是高度的百分比？

所謂30%是指除開內(nèi)容部分的其他區(qū)域，也就是說整個頁面的70%要用來設計內(nèi)容，那30%就是其它的填白（就是在你內(nèi)容兩邊、上下的其他顏色填充），5%吊頂和5%底部，意思是一樣的，就是叫你在上下的位置不要留太多做設計，網(wǎng)頁的內(nèi)容才是主要的

網(wǎng)頁的百分比一般是指上下，因為左右寬度基本是定死的

四、品牌包裝視覺規(guī)范 怎樣翻譯成英文專業(yè)術語，英文高手幫幫~

Brand packaging visual norms

以上就是小編對于視覺規(guī)范問題和相關問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

2023年視覺傳達招聘（2023年視覺傳達招聘要求）

杭州視覺公司（杭州視覺公司有哪些）

日本視覺傳達設計大學排名（日本藝術設計專業(yè)大學排名）

怎么寫網(wǎng)絡小說在哪個平臺（怎么寫網(wǎng)絡小說在哪個平臺寫）

小車質(zhì)量排行榜（小車質(zhì)量排行榜前十名）