01 如何理解界面設(shè)計？

互聯(lián)網(wǎng)的項目職能有產(chǎn)品經(jīng)理、用戶體驗設(shè)計師、交互設(shè)計師、UI設(shè)計師、視覺設(shè)計師、前端工程師、后端工程師、測試工程師等，每個職能崗位對界面設(shè)計的理解深度也各不相同。

交互視角

交互設(shè)計師會從信息架構(gòu)、概念設(shè)計、導(dǎo)航設(shè)計、標(biāo)簽設(shè)計、表單設(shè)計、搜索、篩選、關(guān)系、用戶、目標(biāo)、行為、場景、組件、模式等維度去觀察和理解界面設(shè)計。

組件化視角

產(chǎn)品經(jīng)理、交互設(shè)計師、UI設(shè)計師、前端工程師共同搭建設(shè)計系統(tǒng)語言時，他們會從邏輯、關(guān)系、信息、載體、容器、技術(shù)等維度把界面拆分成一個一個的組件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

視覺視角

UI設(shè)計師、視覺設(shè)計師的視角會關(guān)注界面設(shè)計中的字體、色彩、圖標(biāo)、圖片、布局、編排、比例、質(zhì)感、柵格、風(fēng)格、趨勢等。

前端視角

前端工程師會從代碼視角理解界面結(jié)構(gòu)，相關(guān)知識點有框架、容器、盒子原理、樣式、標(biāo)簽、表單、模式、絕對定位、自適應(yīng)、響應(yīng)式、百分比等。

界面三重構(gòu)構(gòu)思

基于以上視角，現(xiàn)在我會以一種新的視角帶你去理解和學(xué)習(xí)界面設(shè)計，它就是界面三重構(gòu)。簡單說就是分別從X軸、Y軸、Z軸三個維度去理解和解讀界面設(shè)計。但是在模型抽象時遇到了困難，如圖模型一是從界面、交互、前端的X軸、Y軸、Z軸去解讀，模型二是從X軸、Y軸、Z軸的界面、交互、前端的去解讀。

模型的抽象不夠簡潔，有很多重復(fù)的點。這種結(jié)構(gòu)很像組件化中的類別和狀態(tài)。我嘗試用組件化命名的方式梳理出平面邏輯圖。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因為交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。當(dāng)寫到界面X軸相關(guān)知識時，如果有交互、前端的知識點，可以在此基礎(chǔ)上接著寫。

根據(jù)平面邏輯圖我抽象出一個更簡單的模型?？梢詮慕缑娴腦、Y、Z、XY、XZ、YZ去輸出相關(guān)知識點，交互、前端在界面三重構(gòu)的基礎(chǔ)上闡述。

02 X軸設(shè)計

X軸設(shè)計中有位置的結(jié)構(gòu)關(guān)系，位置的排序，段落文本行長的易讀性，交互和前端中的應(yīng)用。

位置

X軸從位置上可以簡化為左右、左中右的結(jié)構(gòu)關(guān)系。

左右結(jié)構(gòu)

在左右的結(jié)構(gòu)關(guān)系中，自古就有左為上，人的視線瀏覽順序是從左到右，從上往下。所以重要的信息內(nèi)容可以優(yōu)先放在左邊。在舞臺劇表演中，重要的角色登場往往也是從左邊進場。微信的發(fā)現(xiàn)列表頁把圖標(biāo)加文字放置左邊，右邊放箭頭指向。

左中右結(jié)構(gòu)

左中右的結(jié)構(gòu)布局讓層級更加豐富，從而增加層次感。左中右的位置順序是可以被定義的，常見的有左中右對應(yīng)一二三的位置關(guān)系，也可以對應(yīng)二一三的位置關(guān)系。這兩種位置關(guān)系分別鞏固了左或中為最重要的地位。

左右并列秩序

我們來看看App界面的底部Tab欄的結(jié)構(gòu)，當(dāng)我們隨意打開一個App時，你還記得底部Tab從左到右的欄目分別是什么呢？可能經(jīng)常使用的App我們很熟悉，對于不熟悉的應(yīng)用可能就不是很了解。但是我們依然可以從中找到規(guī)律，就是第一個欄目往往是首頁，最后一個是我的個人中心，其他的相對比較模糊。

由此我們推斷出從左往右的順序并不是一二三四依次遞減，而是一三四二遞減結(jié)束處呈上升趨勢。這種秩序不但適用于C端產(chǎn)品的界面設(shè)計，同樣也適用于B端的界面設(shè)計。B端產(chǎn)品界面的導(dǎo)航結(jié)構(gòu)第一個是首頁（工作臺）或最重要的內(nèi)容分類，最后一個是更多或設(shè)置。同樣遵循以上規(guī)則。

右側(cè)位置重要最典型就是模態(tài)設(shè)計，在對話框設(shè)計中，確定和取消按鈕往往把最重要的放置在界面的右側(cè)，這時位置的排序確定為一，取消為二。

易讀性

文字段落編排時更多的需要考慮段落文本的易讀性，當(dāng)你設(shè)計C端產(chǎn)品時，因為屏幕尺寸的原因會忽略段落文本的行長，但在Web、B端設(shè)計中，行長的定義可以影響到讀者的閱讀效率和體驗。

美國芝加哥有學(xué)者做過一個試驗，人的眼睛是在不停地跳動，在跳動的時候是看不見字的，停下來的時候才能看見字，而且每次停下來只能看六個字。所以一段文字不要排得太長，過長眼睛在閱讀時會很疲勞，在閱讀時我們更適合閱讀較短的文字。

網(wǎng)頁新聞詳情頁面的行長，我研究了紐約時報為640px、華盛頓郵報680px、Medium680px，所以我們設(shè)計師可以控制行長最大在640—680px。但是西文和漢字還是有區(qū)別的，站在前人的規(guī)則上去學(xué)習(xí)定義規(guī)則更加重要。

交互改變位置秩序

位置的重要秩序其實是很容易打破的，在界面固定不變時結(jié)構(gòu)中相對穩(wěn)定，當(dāng)交互大兄弟來了，說我想嘗試改變改變，如圖把手機的網(wǎng)易云音樂和QQ音樂進行組合成組，原來的一二三四的結(jié)構(gòu)就被打破了，變成了一三二的視覺結(jié)構(gòu)關(guān)系。點開組合后，這時候用戶大兄弟來了，網(wǎng)易云音樂與QQ音樂的排列先后次序取決于產(chǎn)品在用戶心中的重要程度和操作頻次。因人而異，所以大家一定要帶著客觀的心態(tài)去學(xué)習(xí)，不同視角和不同思考維度都會有異樣的結(jié)果。

響應(yīng)式與斷點

X軸設(shè)計從前端的角度就是響應(yīng)式和斷點，因為載體的容器大小不同，前端代碼主要用Media來打斷點，不同斷點之間會定義相對應(yīng)的樣式。內(nèi)容元素按照柵格系統(tǒng)進行適配調(diào)整。

03 Y軸設(shè)計

視覺中心

物理幾何中心是居中的，但是人的視覺中心是偏上的，有時候眼見為實是假的，視錯覺中有大量的案例，在色彩和圖形設(shè)計中需要視錯覺的矯正。

如下圖APP的閃屏頁的Logo居中布局，考慮到有向下的重力和視覺中心偏上的理論，往往把Logo居于物理中心上方。

倒金字塔信息層級

倒金字塔結(jié)構(gòu)是按重要性遞減順序安排消息的一種結(jié)構(gòu)形式。界面展示的信息層級多為倒金字塔結(jié)構(gòu)，重要的信息放上面，越往下信息層級越低。網(wǎng)頁設(shè)計中還會有折線之上的運用，以前人們看報紙是折疊的，但是為了告知讀書報紙展示也是有內(nèi)容的，所以折疊設(shè)計時看到一些圖片引導(dǎo)讀者打開。

Apple官網(wǎng)的信息層級也遵循倒金字塔信息層級，上方Logo加導(dǎo)航，中間為最新發(fā)布的產(chǎn)品，下方為歷史發(fā)布產(chǎn)品。信息重要層級依次遞減。Apple官網(wǎng)下方露出iPhone的照片來引導(dǎo)用戶滾動下拉瀏覽。

縱向模式

縱向模式是用戶習(xí)慣自上而下滾動來瀏覽更多信息，當(dāng)用戶還未確定目標(biāo)信息時，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。如圖微信APP的發(fā)現(xiàn)界面，用戶會選擇一列一列快速瀏覽直到找到某一目標(biāo)信息后，再橫向瀏覽細(xì)節(jié)。那么問題來了，上文中提到倒金字塔信息層級，重要的信息應(yīng)該放置上方，為什么APP的Tab欄很重要卻放置在界面底部，下文隱喻設(shè)計中“駕駛艙隱喻”會講到。

04 XY軸設(shè)計

X軸與Y軸組合后就形成了一個平面，所以平面設(shè)計的理論知識在此次也適用。

盒子原理

當(dāng)我們做界面設(shè)計時，為了讓界面的元素統(tǒng)一為一個整體時，給他們整體來個框框就形成了一個一個盒子的樣式，這樣更有利于組合信息。典型的設(shè)計有卡片、列表、模塊化等。

四角壓邊

在Dribbble的作品展示中，由于作品圖片展示比例為4:3，為了平衡界面中的元素，常常在四個角放一些小的相關(guān)元素來平衡畫面。我們來看一下R神的插畫作品中大量使用了四角壓邊的設(shè)計技巧。

運用到界面設(shè)計中最典型的就是卡片設(shè)計，比如個人中心、銀行卡、列表頁面等。如圖銀行卡就采用卡片設(shè)計，四角放置信息，整體給人簡潔大氣的感覺。

四角壓邊在設(shè)計中是可以靈活運用的，可以把四角壓邊變成三角壓邊，兩角壓邊。如圖當(dāng)四角壓邊的A1、B1與A2、B2位置慢慢移動至重合時，四角壓邊就變成了兩角壓邊，多用于列表頁。

蹺蹺板原理

四角壓邊的本質(zhì)是蹺蹺板原理，通過調(diào)整元素讓界面達到平衡。蹺蹺板原理本質(zhì)是平衡，需要關(guān)注的是中間的一條水平線。微信列表設(shè)計中就運用了這個原理來平衡界面。在蘋果的原生設(shè)計中列表之間分割線是不包含圖標(biāo)且一直切到最后側(cè)。因為左邊的圖標(biāo)視覺重量大，右邊的重量小，但是通過縮短左側(cè)的杠桿長度并增加右側(cè)的杠桿長度來達到視覺平衡。這種設(shè)計技巧在編排設(shè)計會被大量運用。

8點網(wǎng)格（4點網(wǎng)格）

8點網(wǎng)格理論來源于谷歌Material Design的設(shè)計語言，4點網(wǎng)格理論來源于蘋果iOS的設(shè)計語言。個人還是更加喜歡iOS的4點網(wǎng)格，因為原子單位越小，可呈現(xiàn)的方式越多，可解決的問題方案也越多。8點網(wǎng)格可以理解為最小單位，其他使用的單位都為8的倍數(shù)。8點網(wǎng)格多用于DIV盒子與盒子之間的間距。圖標(biāo)、頭像等固定尺寸的也可以使用8的倍數(shù)。

蘋果和谷歌都是在定義產(chǎn)品系統(tǒng)中的度量單位，西方人一直想定義度量這個問題，其中最有名的就是勒·柯布西耶的《模度》，他的理論是以西方人的的比例結(jié)構(gòu)來定義規(guī)范，并不能適用于全世界更多的人種比如東方人、非洲人。但是蘋果設(shè)計團隊發(fā)現(xiàn)世界上所有人類的手指觸摸屏幕大小是一致的，最小為44pt。iOS定義了人類使用觸控屏的基本度量，44pt也是4的倍率，這才是我喜歡iOS的4點網(wǎng)格的真正原因。

視覺流引導(dǎo)

讀者在看界面的時候，眼睛的視線受到畫面內(nèi)容的吸引，就會產(chǎn)生一個視覺先后的次序，將這些視覺集中點的先后依次連起來，就形成了視覺流導(dǎo)向。

設(shè)計師經(jīng)常會考慮版面或界面上的文字是否會被閱讀，實際上很多文字都不會被閱讀，但是可能會被瀏覽。視覺眼動儀可以檢測到人們?nèi)绾螢g覽一個頁面的，從找到切入點，到了解界面中信息關(guān)注的先后次序，從而調(diào)整界面元素，來引導(dǎo)用戶去關(guān)注重要且有用的信息。常用的視覺流導(dǎo)向有F模式、Z模式、古騰堡圖表法等。

F模式

尼爾森F型視覺模型由Jakob Nielsen于2006年提出，他指出用戶在瀏覽界面時，視線動線會呈現(xiàn)宛如英文字母F的形狀，這種視覺瀏覽模式主要包括以下三個方面：

1、讀者的眼睛會先從頂部開始，從左到右水平移動，瀏覽的上半部分會形成一條橫向的運動軌跡，這就是F形狀的第一條橫線。

2、讀者的目光會向下移動，并再開始從左到右觀察，但瀏覽的視覺動線長度會相對短些，這就是形成了F形狀的第二條橫線。

3、讀者從界面左邊的部分進行垂直掃描，以較短的長度向下掃描，此時讀者的閱讀速度較慢，而且更有條理性和系統(tǒng)性，這樣就形成了F形狀的一條豎線。

根據(jù)尼爾森F模型，我們可以得出幾個心理暗示：

1、讀者在瀏覽界面時是快速掃視，不會仔細(xì)閱讀每一個界面內(nèi)容。

2、界面的頭兩段文字無比重要，多用小標(biāo)題、短句引起閱讀者注意。

3、將重要的內(nèi)容放在最上邊，將重要的信息顯示在標(biāo)題和段落的前部顯示給讀者。

Z模式

Z模式是基于用戶從左到右自上而下的閱讀習(xí)慣，用戶首先關(guān)注的上半部頁面的內(nèi)容，依照從頭部的左邊到右邊，再沿著對角線瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。如圖頭條的文本編排從標(biāo)題從左到右閱讀到文本從左到右閱讀。

古騰堡圖表法

古登堡圖表法（Gutenberg Diagram）又稱對角線平衡法則（Diagonal Balance），由14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限：

1.第一視覺區(qū)(Primary Optical Area)：左上方，讀者首先注意到的地方。

2.最終視覺區(qū)(Final Optical Area)：右下方，視覺流程的終點。

3.強休息區(qū)(Strong Follow Area)：右上方，較少被注意到。

4.弱休息區(qū)(Weak Follow Area)：左下方，最少被注意到。

如圖小程序的授權(quán)頁從Logo到允許高亮按鈕就是對角線平衡構(gòu)圖。

05 Z軸設(shè)計

Z軸設(shè)計可分為視覺度層級（單界面）、結(jié)構(gòu)層級（單界面）、產(chǎn)品用戶流程（多界面）。

視覺度層級（單界面）

視覺度層級是根據(jù)界面元素的視覺表現(xiàn)來進行劃分瀏覽的先后次序。界面的視覺度表現(xiàn)技法有主體與背景、投影、色彩字重字號等。

主體與背景

界面中使用背景色是讓元素向前進，背景色多為灰色且有顏色傾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。當(dāng)背景色為白色時就需要留白、線條、投影來區(qū)分層級。

投影

界面中使用投影可以增加內(nèi)容的視覺層級，之前追波流行的彌散投影也是為了增加界面視覺層級。谷歌Material Design就是運用紙張的物理投影來映射到設(shè)計系統(tǒng)中。在界面設(shè)計中使用投影時要思考這種技巧的保鮮時長。

色彩大于字重大于字號

色彩最典型的就是App的消息紅色圓點，紅色的波長最長，所以用最突出的紅色來提醒用戶有新動態(tài)。字重是從面積的大小衡量的，標(biāo)題文字常常加字重來提升視覺。在定義組件時，鼠標(biāo)懸浮、Hover的各種狀態(tài)就是用顏色來區(qū)分，目的是讓用戶操作后有反饋的感知。

結(jié)構(gòu)層級（單界面）

界面元素中的結(jié)構(gòu)層級可以分為內(nèi)容層、導(dǎo)航層、遮罩層、彈出層。內(nèi)容層是界面內(nèi)容元素的承載；導(dǎo)航層是位于內(nèi)容之上，位置相對靜止；遮罩層配合彈出層一起使用，又叫模態(tài)層；彈出層屬于輕量化設(shè)計，比如消息通知、下拉菜單和加載、報錯等狀態(tài)提醒。

模態(tài)對話框

如圖模態(tài)對話框是用戶在完成任務(wù)時，不希望跳轉(zhuǎn)頁面而打斷工作流程，而是用Modal對話框在一個界面上承載相應(yīng)的操作。對于信息量不大，容器可展示的操作可用模態(tài)對話框。

產(chǎn)品用戶流程（多界面）

產(chǎn)品的界面設(shè)計需要從概念到信息分類到信息架構(gòu)，目的是方便用戶快速的搜索、篩選、辨別出有用的信息。交互設(shè)計需要學(xué)習(xí)辛向陽教授的交互設(shè)計五要素：用戶、行為、目標(biāo)、場景、媒介。

產(chǎn)品的Z軸設(shè)計其實是從平面（界面）、空間（層級）、架構(gòu)（關(guān)系）梳理出結(jié)構(gòu)關(guān)系，但站在產(chǎn)品層面最重要的是信息與用戶的交互設(shè)計，關(guān)注用戶旅程地圖中用戶流程。用戶流程需要多界面之間跳轉(zhuǎn)，這就形成了產(chǎn)品的Z軸界面設(shè)計。

什么是用戶流程

用戶流程是用戶從打開APP到完成任務(wù)關(guān)閉APP的使用全過程，包括了用戶看到什么信息，做了什么事。

疫情期間每天都需要使用隨申辦小程序，用戶流程是打開微信，進入到微信首頁，下拉查看常用小程序，點擊隨申辦，查看隨申辦，退出小程序。

根據(jù)用戶流程優(yōu)化體驗，用戶流程越短越好，操作流程盡量不超過5步。用戶流程要顧及頭尾，即用戶進入到一個新界面會看到什么信息，用戶成功完成任務(wù)后會跳轉(zhuǎn)到哪里，或顯示哪些反饋信息。這些都是最容易被遺忘的接觸點。

如何確定用戶流程

基于用戶的使用場景。以小水查找朋友圈某個朋友的信息為例，需要思考用戶有哪些場景，如果知道誰發(fā)的，就會先通過找到人，然后進入其朋友圈找到信息。如果忘記誰發(fā)的呢，那只能憑記憶里在朋友圈慢慢滑動，直到找到該信息。

以上從交互設(shè)計五要素行為和場景對用戶流程進行分析，還可以從用戶、目標(biāo)、媒介去思考如何幫用戶高效的完成任務(wù)。拆解用戶方法有用戶畫像分類、北極星指標(biāo)分類、用戶目標(biāo)分類、用戶角色分類、利益相關(guān)者等。拆解媒介的方法有競品分析、頭腦風(fēng)暴、ABTest、埋點數(shù)據(jù)分析等。

06 XZ軸設(shè)計

上文已經(jīng)講了Z軸相關(guān)設(shè)計，為什么還要寫XZ軸、YZ軸的設(shè)計呢，從X、Y、Z、XY、XZ、YZ更有邏輯性和完整性，也確定存在一小部分的案例可以解析。

Banner輪播圖

Banner輪播圖除了橫向的X軸出場次序，還有Z軸點點一對一的當(dāng)前狀態(tài)。移動端受容器大小限制多為Z軸設(shè)計，Web端容器變大可以變成左右的交互設(shè)計形式。

導(dǎo)航欄

導(dǎo)航欄是Z軸的視覺與交互結(jié)合，當(dāng)前狀態(tài)需要重點突出，視覺向前進，點擊導(dǎo)航欄后底部的橫線會有動效移動，可以側(cè)滑導(dǎo)航欄選擇類別，這樣效率會更高；也可以側(cè)滑下方內(nèi)容切換選擇。

列表側(cè)滑刪除

列表側(cè)滑是使用內(nèi)嵌的布局方式，界面設(shè)計中用戶習(xí)慣是先查看再操作，當(dāng)容器大小放置不下可先隱藏操作按鈕。QQ聊天界面?zhèn)然瑑?nèi)容可以引用該內(nèi)容。微信消息列表側(cè)滑出現(xiàn)標(biāo)為未讀、不顯示、刪除操作按鈕。

07 YZ軸設(shè)計

YZ軸多結(jié)合界面交互一起設(shè)計，通過用戶操作形成Z軸信息架構(gòu)的變化。YZ軸設(shè)計多用于信息流、鍵盤輸入等

頁面滑動

信息流的設(shè)計多為Y軸設(shè)計，Y軸急促、緊張的情緒會讓用戶不停的刷信息。信息流設(shè)計中采用相似的界面結(jié)構(gòu)保持統(tǒng)一，比如固定的頭像位置，固定的操作按鈕位置，標(biāo)題文本形式等。微信朋友圈信息流一整塊一整塊的加載提高閱讀效率；而抖音的視頻流是一個一個加載，更注重精準(zhǔn)推送和沉浸式的觀看體驗。

鍵盤輸入

鍵盤輸入也是采用YZ軸設(shè)計方式，不同場景下的鍵盤輸入交互也有差別，微信聊天界面的鍵盤輸入框放置在底部，每次調(diào)用鍵盤組件時界面會從下往上移動；而朋友圈評論時，鍵盤組件除了從下往上移動，還要對齊到對應(yīng)評論的內(nèi)容上。前端的定位技術(shù)會有所不同。

08 模型升級

界面三重構(gòu)模型中的界面可以替換成交互、前端、容器、用戶、信息等，當(dāng)然也可以替換成桌面端、Web、小程序、APP、B端設(shè)計等。這樣就可以把中間的要素抽象成N，界面三重構(gòu)模型升級為N——X軸、Y軸、Z軸，N可以為單一的內(nèi)容比如界面，也可以是N=N+N比如界面加交互一起思考。簡化的模型更適合微觀層面的細(xì)節(jié)設(shè)計，并不適合于宏觀視角的分析設(shè)計。

如何使用該模型？

我們來舉一個組件的例子，比如導(dǎo)航設(shè)計共分為二級導(dǎo)航，我們常規(guī)會顯示出一級導(dǎo)航。一級導(dǎo)航可以從X軸、Y軸兩個維度去思考，X軸的多為橫向全局導(dǎo)航，Y軸多為側(cè)邊導(dǎo)航欄。當(dāng)交互大兄弟來顯示二級導(dǎo)航時可以平鋪（XY）、上?。╖）、內(nèi)嵌（Z），二級導(dǎo)航展示方式還需要考慮容器大兄弟的意見，容器夠大就可以選擇平鋪，容器小就展開收起的交互模式，展開就會有上浮和內(nèi)嵌的兩種形式。

模型抽象的N是隨時發(fā)生變化，對應(yīng)的界面設(shè)計形態(tài)也會發(fā)生變化，但是X軸、Y軸、Z軸的方法和設(shè)計技巧是相對不變的。只是你知道或不知道，會用或不會用的區(qū)別。產(chǎn)品設(shè)計中常用的兩個方法是等價設(shè)計和同形異構(gòu)。

等價設(shè)計

等價設(shè)計是幫助用戶完成任務(wù)的結(jié)果是一致的，但過程可能不同，又或者是產(chǎn)品的邏輯結(jié)構(gòu)是一致的，但設(shè)計的外在形式有差別。

如圖京東購物車的數(shù)量添加減少功能是展示出來的，直接可以添加可減少商品數(shù)量；但是淘寶購物車的數(shù)量是展示結(jié)果，修改商品數(shù)量需要點擊后出現(xiàn)步進器組件。這兩個設(shè)計形式就是等價設(shè)計，等價設(shè)計的好壞需要考慮很多因素，用戶、目標(biāo)、場景、手段、行為、容器、信息關(guān)系、生活方式等。存在即合理，合適最重要。

同形異構(gòu)

同形異構(gòu)是指不同的信息、數(shù)據(jù)類型設(shè)計出相同的外在形式。微信消息列表也中有微信廣告助手、服務(wù)通知、訂閱號消息、文件傳輸助手、個人聊天、群聊天等，這些消息的數(shù)據(jù)類型、對象各不相同，可是外在的結(jié)構(gòu)形式是一樣的，這樣做的目的是簡化、統(tǒng)一，通過圖標(biāo)和頭像來區(qū)分人、應(yīng)用、工具的消息差異。

以上總結(jié)的界面三重構(gòu)相關(guān)知識、理論、技巧都有其使用范圍，那么有沒有一種設(shè)計方法可以凌駕于界面三重構(gòu)模型之上呢，答案是肯定的，那就是隱喻設(shè)計。

09 隱喻設(shè)計

什么是隱喻設(shè)計？我們應(yīng)該怎么去理解它呢？隱喻可以理解為隱含的相似性，它用想象的方式將某一物體與另一物體相聯(lián)系，并把二者的特征、情感等相互結(jié)合轉(zhuǎn)移。如果對隱喻設(shè)計感興趣可以搜索我之前寫過的文章《揭開隱喻設(shè)計的面紗-你不知道的隱喻設(shè)計》

隱喻設(shè)計是通過象征、類比的手法將復(fù)雜抽象的概念簡明化、具象化、降低用戶學(xué)習(xí)使用的成本，為用戶創(chuàng)造清晰、明了、舒適的操作體驗。產(chǎn)品設(shè)計具體表現(xiàn)在蘋果的ios操作系統(tǒng)和谷歌的Material design。

iOS六大設(shè)計原則之一

iOS六大設(shè)計原則：AestheticIntegrity(審美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反饋)、Metaphors(隱喻)、User Control(用戶控制)。

Metaphors(隱喻設(shè)計)當(dāng)一個app的虛擬對象和動作都是對熟悉事物的隱喻時（不管基于現(xiàn)實世界還是數(shù)字世界），用戶學(xué)習(xí)的更快；隱喻設(shè)計在iOS系統(tǒng)中很好的得到體現(xiàn)，因為用戶是直接與屏幕產(chǎn)生物理交互的。

用戶移動視圖來查看更多的內(nèi)容；拖拽內(nèi)容；切換開關(guān)、移動滑塊并且直接滾動來選取值；甚至可以像翻書或雜志一樣輕快翻頁。

關(guān)于隱喻設(shè)計還可以用另一個概念來表達，那就是心智模型。因為人類幾千年的發(fā)展，雖然科技進步很快，外部環(huán)境也發(fā)生劇烈變化，但是人類的心智進步其實是很慢很慢的。

心智模型

心智模型最早是由蘇格蘭心理學(xué)家蘇珊·凱里在1943年提出的，是指在人們心中根深蒂固存在的, 影響人們認(rèn)識世界、解釋世界、面對世界, 以及如何采取行動的陳見、假設(shè)和印象。心智模型是一種內(nèi)部表征, 但這種表征并不是對外部世界的完全模擬, 具備不正確性和不科學(xué)性等。因為用戶心智模型存在這些不足, 所以需要了解其偏差與錯誤的來源, 以便今后采取適當(dāng)?shù)拇胧┨岣哂脩襞c系統(tǒng)的交互效率。

在產(chǎn)品設(shè)計的系統(tǒng)領(lǐng)域，心智模型是指人們對于產(chǎn)品系統(tǒng)的理解，用戶需要了解這款產(chǎn)品是干嘛的、它有哪些功能、這款產(chǎn)品解決了我什么問題、我要如何使用該產(chǎn)品。每個用戶將具有不同的思維模式，他們對產(chǎn)品或網(wǎng)站的進一步體驗將逐漸改變和調(diào)整其思維模式。

心智模型其實是通過學(xué)習(xí)、感悟不斷提升自我認(rèn)知的過程，還記得我剛開始學(xué)習(xí)軟件時候，如合成軟件Photoshop、三維軟件C4d。當(dāng)我第一次接觸這類軟件時，感覺整個人摸不著頭腦，太多的概念都不清楚，比如通道、圖層樣式、曲面建模、打燈光、動態(tài)圖形等。踏踏實實的去學(xué)習(xí)這款軟件是最有效的方式，通過不斷的試錯和總結(jié)，慢慢的得心應(yīng)手，這樣我們對于軟件的心智模型就會逐漸形成。

但是有些心智是和我們生活方式、習(xí)慣、文化息息相關(guān)的。日本設(shè)計師深澤直人就提出了一種叫做無意識設(shè)計的設(shè)計理念，又稱為“直覺“。其實在界面設(shè)計中也存在日常生活與線上產(chǎn)品的映射。所以設(shè)計師需要有好奇心、有共情、有洞見，才能很好理解設(shè)計來源于生活這句話。

XY情緒

X軸與Y軸的情緒可以從日常生活中找到答案，星巴克、瑞幸的店鋪使用了X軸的橫向排列，而在肯德基、麥當(dāng)勞的店面排隊使用了Y軸豎向排列的方式。我們嘗試用抽象思維把它們進行圖形化，可以表達的更加直觀。

星巴克、瑞幸的店鋪使用了X軸的橫向排列，用戶可以看到工作人員不停工作，哪怕需要等待一會也不會很壓抑，整個體驗過程會給人一種舒適、安逸、閑散。而肯德基、麥當(dāng)勞的店面排隊使用了Y軸豎向排列，會營造一種熱鬧的感覺，因為是快餐需要快速的售賣商品就需要給用戶營銷一種緊張急促的感覺，買完就走的即視感。

通過對日常生活和物理世界的映射，設(shè)計師在產(chǎn)品設(shè)計時可以考慮使用X軸和Y軸的情緒設(shè)計，比如文本采用橫向排列會給用戶帶來一種平靜、舒適的體驗。APP底部的Tab欄橫向排列希望用戶花更多的時間瀏覽每個欄目的內(nèi)容，這時候內(nèi)容的好壞、吸引度也是重要的衡量指標(biāo)。

在信息流的設(shè)計中大量采用Y軸，因為Y軸緊張、急促的感覺會讓用戶下意識的快速下滑，比如微信的朋友圈；抖音上滑來切換視頻；直播互動通過大量評論來營銷熱鬧氛圍。

隱喻設(shè)計

駕駛艙隱喻—APP Tab欄

在前文中提到人閱讀瀏覽的順序是從左往右，從上往下的。那么應(yīng)該把重要的東西放置在左邊或者上邊。Tab欄作為APP應(yīng)用的主導(dǎo)航為什么卻放置在界面的底部，這時候就需要用隱喻設(shè)計來解釋了。就好比科學(xué)的盡頭是哲學(xué)，哲學(xué)的盡頭是佛學(xué)一樣。

日常生活中開車、騎車，手永遠是在控制方向和操作，而視線前方就是駕駛員需要瀏覽閱讀的內(nèi)容，比如行人、馬路、車流等。把駕駛艙隱喻映射到產(chǎn)品界面中，底部Tab欄是引導(dǎo)用戶去往哪里，上方動態(tài)變化來滿足不同用戶對不同內(nèi)容的需求。

問答隱喻—知乎問答

在線下學(xué)校的教室里，老師提出問題學(xué)生們舉手回答的場景，抽象一層其實是一個提問者、多個回答者的邏輯，是一對多的關(guān)系。知乎問答界面就采用了教室的問答隱喻設(shè)計，一個問題多個回答。

觀看隱喻—B站直播

在電影院看電影時，屏幕在正前方，很多人共同觀看一個屏幕。其實也是一對多的關(guān)系。B站的直播界面平臺，也是數(shù)以萬計的人共同觀看一個直播，下面的評論彈幕映射電影院的歡聲笑語。

會議隱喻—Zoom視頻會議

協(xié)同辦公領(lǐng)域，在會議室開會是再尋常不過了，會議室開會時能同時看到同事的面部表情，每個同事都可以投屏進行共享會議內(nèi)容。Zoom的視頻會議軟件采用了線下會議隱喻設(shè)計，Zoom視頻會議支持多人視頻討論，每個人都可以共享屏幕進行實時分享內(nèi)容。

互聯(lián)網(wǎng)行業(yè)才短短十幾年，但人類的日常生活卻已經(jīng)演化了幾千年。好的生活方式和習(xí)慣會慢慢的保留下來。當(dāng)設(shè)計產(chǎn)品時遇到問題沒有方向時，不妨停下腳步看看人們在日常生活中是如何運作？能不能從生活中吸取靈感。

總結(jié)

界面三重構(gòu)給設(shè)計師提供一個嶄新視角，相關(guān)的知識、理論、技巧還不完備。設(shè)計師可以根據(jù)自己的經(jīng)驗和閱歷進行迭代。從用戶體驗五要素的視角去看，界面三重構(gòu)算是從結(jié)構(gòu)和表現(xiàn)層進行挖掘設(shè)計的可能性，偏微觀層面的設(shè)計。在實際運用中需要結(jié)合用戶、信息、交互、界面、前端、場景、流程等多維度思考。

界面三重構(gòu)的想法起源于2019年，2020年于Gllue UED團隊內(nèi)部分享，2021在RDD內(nèi)部分享，整理制作發(fā)表于2022年6月。

感謝閱讀，很片面，共勉。

原文地址：水手哥學(xué)設(shè)計（公眾號）

作者：水手哥

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI新視角-界面三重構(gòu)

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

完美開局的賬號就需要有3個前提：

1.多金，夠氪 

2.很歐，運氣爆表 

3.很肝，以勤補拙

對于設(shè)計師來說，怎么樣才是完美的開局賬號呢？在我們身邊也會經(jīng)?？吹揭恍┓浅Ｅ５脑O(shè)計師，他們可能很年輕，但是設(shè)計能力很強，又有非常好的學(xué)歷背書，一畢業(yè)就能夠拿著別人3、4年都拿不到的薪水。我們就會覺得這樣的開局就是相當(dāng)完美了。

但是這樣的開局賬號也幾乎是極少數(shù)的，好的學(xué)歷背書大部分都是要靠父輩們的積累，例如美術(shù)生學(xué)設(shè)計專業(yè)的學(xué)生其實開銷是很大的，相比其他的專業(yè)在這個學(xué)習(xí)過程中需要不斷的氪金，這點不可否認(rèn)。

另外，一個人在成長過程中的教育、受到的熏陶、環(huán)境的影響也會影響一個人的發(fā)展，有的人說天賦好所以他們起點高，進步快。

但是天賦也需要不斷修煉，比如你在幼年的時候就展現(xiàn)出對藝術(shù)創(chuàng)意的敏感，但是后天家庭并沒有資源培養(yǎng)你，那么等你長大了這個天賦可能也就不是你的優(yōu)勢了。

所以別看那些年輕有能力的設(shè)計師這么厲害，大部分其實都是家庭殷實，前期投入了非常多的資源才能達到的。大部分家庭都比較普通，所以拋開這些條件，我們來聊一聊如何讓自己的開局能夠比其他人更好。

開局的幾個階段

那么我們分為幾個階段來講，分別是：大學(xué)期間、初入職場、職場3年

賬號需要養(yǎng)成，但是開局非常重要，其實這幾年我接觸了這么多設(shè)計師大部分都不是科班畢業(yè)的，因為大家考大學(xué)的時候其實對這些專業(yè)和以后職業(yè)的發(fā)展是不清晰甚至很迷茫的，所以很多專業(yè)的選擇一般也會根據(jù)父母還有親戚的建議做選擇。想當(dāng)初我報了電子信息工程專業(yè)以為是去玩電腦的，結(jié)果課程內(nèi)容卻是焊接電路板，寫代碼。所以已經(jīng)是美術(shù)專業(yè)的同學(xué)們要慶幸自己已經(jīng)比大部分設(shè)計師的起點要高了。

那么無論你目前是什么專業(yè)，但是后面想從事和設(shè)計相關(guān)的工作，在大學(xué)期間我們可以做一些什么事讓自己有更高的起點。

1.1.提前轉(zhuǎn)變思維

高中三年又經(jīng)歷了高考難免會讓大部分同學(xué)覺得終于解脫了，可以到大學(xué)去吃喝玩樂了，從快樂的角度我也會這么選擇，畢竟這么多年讀書讀下來確實很壓抑，所以我自己大學(xué)四年也幾乎都是玩過來的，但是再讓我選一次，我一定不這么做。

在大學(xué)期間，最重要的事情是什么？我認(rèn)為是提前找到自己喜歡的事并且付諸實踐，思考他將來成為你職業(yè)的可能性。可能很多學(xué)生目前還不會去考慮職業(yè)，只想著怎么修好學(xué)分，順利畢業(yè)，但是畢業(yè)之后去從事什么工作還沒有勇氣或者沒有頭緒去思考。那么即使你不是設(shè)計專業(yè)的學(xué)生，你也可以在大學(xué)期間輸出設(shè)計相關(guān)作品。但前提就需要自己花時間去學(xué)，相比于科班的同學(xué)會更加辛苦一些。

這幾年見過的一些大學(xué)生也都相當(dāng)?shù)摹熬怼保ㄟ@里的卷不是貶義），很多學(xué)生從大二開始就自己做自媒體做設(shè)計公眾號，然后輸出大量的設(shè)計作品和觀點文章傳到設(shè)計平臺，還沒有畢業(yè)就已經(jīng)拿了不少的平臺推薦，也正因為這些輸出給自己的實習(xí)工作拿到了不錯的大廠機會。然而目前很多工作5、6年的設(shè)計師這幾年的作品加起來還沒有這些大學(xué)生來的多，因為很多設(shè)計師都是被動轉(zhuǎn)行，沒有設(shè)計的初心，工作項目不總結(jié)，業(yè)余時間不練習(xí)，遑論高級或資深？

所以我建議想要從事這個行業(yè)的人在大學(xué)就要思考清楚，自己是否喜歡做設(shè)計。設(shè)計這個行業(yè)和一般的職能類工作不一樣，它的上下限都是很高的，如果你去做后勤職能，就算你不喜歡做，按部就班依然可以完成，可以混口飯吃。但是設(shè)計不行，設(shè)計師只能上不能下，如果你原地踏步3年必然會被淘汰，你不喜歡它你就不會把時間和精力放在上面去提升，這些個例子在很多咨詢我課程的同學(xué)中已經(jīng)屢見不鮮了。

大學(xué)也是為了讓一個稚氣未脫的學(xué)生能夠轉(zhuǎn)變成獨立思考的成年人的一個過程，在這個過程中你會學(xué)到很多社會、職業(yè)上的規(guī)則，比如怎么去運營自己？怎么給自己創(chuàng)造機會？怎么獲得更多的資源？通過什么手段渠道提升自己等等。

1.2.學(xué)會輸出作品

在大學(xué)中如何輸出作品呢？一般有幾種途徑：

1.參加各大平臺舉辦的設(shè)計比賽，例如站酷

2.跟著自己的導(dǎo)師輸出項目作品 

3.參加一些培訓(xùn)課程輸出作品 

4.自學(xué)輸出作品

那么我首先推薦的是通過參加比賽去積累自己的作品。雖然參加比賽不一定能夠獲獎，但是你可以看到自己的設(shè)計作品和其他設(shè)計師相比有什么不足，從而優(yōu)化改進自己的弱項。如果能夠獲得一些獎項，那么你去實習(xí)或者畢業(yè)找工作都是很好的加分項，同時也能增加你個人的曝光，很多甲方或者設(shè)計團隊負(fù)責(zé)人會從這里來挑選合適設(shè)計師進行合作和招聘。

然后有同學(xué)也想問，如果想找實習(xí)沒有真實項目怎么辦。大部分真實項目一般都是來自導(dǎo)師的外部項目。運氣好的話你的導(dǎo)師給你的項目剛好是和你以后實習(xí)崗位相關(guān)的，如果沒有真實項目也不要太擔(dān)心。因為除了一些要求特別高的大廠實習(xí)崗位，一般企業(yè)的實習(xí)工作其實只要你輸出的作品和手活好就足夠了，是不是真實項目沒那么重要。

不過話又說回來，這也是讓各位同學(xué)在高中就好好讀書，盡量去一個好的學(xué)校讀這個設(shè)計專業(yè)。好的學(xué)校有好的老師，有好的老師就有好的資源就有好的項目，就有更多的機會去好的公司實習(xí)，就是這么回事。所以如果你是一般大學(xué)的設(shè)計專業(yè)，就得看老師的資源怎么樣了。如果沒有一些好的項目，也可以選擇去上上課，但是這個怎么選擇課程水就很深了，這里不多贅述了（你們懂得）。

所以你們想想，當(dāng)你其他室友在打游戲看劇，而你在做設(shè)計練習(xí)，別人可能會笑你別那么努力，但是你一定能夠先找到工作然后請他們吃個飯。

1.3.找實習(xí)工作

如果你能夠做好前兩點，不夸張的說基本已經(jīng)超過95%的同齡人了，完美開局賬號也已達成了1/3。在大學(xué)期間最后一件事那就是找實習(xí)工作，這里我要說的是實習(xí)盡量去大廠。如果沒有這個機會也盡量去找有一定規(guī)模的設(shè)計團隊的企業(yè)。

實習(xí)的目的不是為了畢業(yè)答辯，也不是為了賺點外快，而是為了畢業(yè)之后的第一份正式工作做準(zhǔn)備，積累真實項目的經(jīng)驗。大廠的實習(xí)機會是不簡單的，他們主要面向211、985等設(shè)計相關(guān)專業(yè)的本科及以上的學(xué)歷學(xué)員進行實習(xí)招生，像交互、用戶研究崗位只向某個固定專業(yè)的碩士研究生開放。

那如果不是這些高等院校的學(xué)生就沒有機會了嗎？當(dāng)然不是，設(shè)計這個崗位學(xué)歷是需要的但不是最重要，還是要看設(shè)計以及綜合能力的，即便你不是211、985，但是你的設(shè)計足夠優(yōu)秀，那還是可以獲得大廠的青睞的，學(xué)歷只是一種篩選條件。

如何找到比較好的實習(xí)機會，我這里建議大學(xué)生們可以多上像站酷一樣的設(shè)計平臺，去結(jié)識更多優(yōu)秀的設(shè)計師。為什么要這么做呢？因為大學(xué)生往往想投簡歷都是通過一些招聘網(wǎng)站去投的，這樣的效率很低，因為即便你的履歷還不錯，但是依然要等hr重重篩選過之后才會到設(shè)計負(fù)責(zé)人這邊。所以我建議你在設(shè)計平臺有足夠多的積累之后多去結(jié)識一些和你方向比較接近的設(shè)計師，他們可能就在某個大廠在職。例如你是畫插畫的，那么你可以關(guān)注這個領(lǐng)域的一些站酷推薦設(shè)計師，加一加聯(lián)系方式，現(xiàn)在很多大廠的設(shè)計師也背負(fù)著招人的指標(biāo)，實習(xí)可能不算正式指標(biāo)，但他們也會通過社交平臺進行發(fā)布，這機會不是來了么～

如果有多個實習(xí)機會怎么篩選。

1.選擇和自己規(guī)劃方向一致的崗位。大部分企業(yè)招聘實習(xí)生，是為了解決一些瑣碎的工作，而不是為了培養(yǎng)，所以實習(xí)生的工作內(nèi)容是很雜的，如果你本身的方向是做UI/UX的，但是你到一家公司卻不停的做平面的工作，這樣就會很浪費時間，甚至無效產(chǎn)出。不過有一些大廠其實也會讓實習(xí)生去接觸更多崗位的工作，是為了找到更契合的點，并且讓實習(xí)生去熟悉不同崗位的工作內(nèi)容，提高協(xié)同效率和個人綜合能力。

2.選擇有機會留下來的。同樣的能力，校招比社招便宜很多并且成本低，很多實習(xí)生無法轉(zhuǎn)正是因為企業(yè)沒有多余的hc，也就是這段時間不招人。不過也要看設(shè)計團隊的需求，如果只是缺人干一些重復(fù)性工作的話，留下的概率比較大。但是如果缺的是一些專業(yè)技術(shù)人才或者彌補團隊能力空缺的話，實習(xí)生機會就比較小了。

2.1.很肝才會很歐

咱們已經(jīng)靠自己的努力步入了職場。但是第二階段我要講的是第一階段沒有做好的同學(xué)們，在這個階段要做什么。假如你是從三流大學(xué)畢業(yè)的，但是某些機緣巧合你入職了一家公司，正從事著設(shè)計的工作，這個時候怎么樣再把自己的賬號打造的“完美”。

每個人的機遇不同，但是時間是相同的。有一句話叫做成年人只能被篩選，不能被教育。我覺得有失偏頗，因為只有那些固步自封的成年人才不能被教育，比如我曾經(jīng)遇到過兩個背景比較相似的同學(xué)，都是從培訓(xùn)班出來之后才進入職場做設(shè)計的，基礎(chǔ)可以說幾乎沒有，只學(xué)會了軟件。一個同學(xué)的基礎(chǔ)和天賦好一些，但會有一點優(yōu)越感，每次作業(yè)沒有按量完成，給我的理由是這些界面他以前畫過不少了，所以就只交了幾張。而另一個同學(xué)呢除了完成我布置的作業(yè)以外自己還去畫更多的界面，兩個人同一個作業(yè)的結(jié)果在量上就差了好幾倍，最后結(jié)果顯而易見。

剛進入職場的第一件事就是不停的肝，肝什么？肝到什么程度？我舉個例子，例如你現(xiàn)在是一名初級UI設(shè)計師，你的工作是繪制UI界面、圖標(biāo)、插畫和一些運營海報之類與視覺相關(guān)的工作，那么你第一個階段的目標(biāo)就是能夠連續(xù)拿到3個站酷的編輯精選推薦。無論是成套的UI界面也好，圖標(biāo)也好，只要連續(xù)拿到3個編輯精選就可以，中間需要連續(xù)，比如第一次2火，第二次1火，說明你設(shè)計的結(jié)果不穩(wěn)定。同時，時間周期必須在2個月以內(nèi)，務(wù)必利用自己所有娛樂的時間去肝這些練習(xí)。當(dāng)然你除了上傳站酷，也可以發(fā)給我評估，或者一些行業(yè)內(nèi)優(yōu)秀的設(shè)計師去評估都可以。

再下一個階段的目標(biāo)就是拿站酷首推，站酷首推的含金量還是挺高的，拿10個編輯推薦也沒有拿1個首推來的高，如果你可以靠設(shè)計作品連續(xù)拿到3個首推，那么基本拿到了大廠的門票。這個時候你會收到很多獵頭以及大廠設(shè)計負(fù)責(zé)人的私信，不要懷疑，朝這個目標(biāo)去努力就對了。至于怎么拿首推，我以后再做一個分享。

剛進入職場，重心不要太放在項目上，而是不斷打磨設(shè)計的專業(yè)技能，在設(shè)計初期最重要的是兩件事：1.掌握各種設(shè)計技巧與風(fēng)格 2.提升自己的審美與認(rèn)知。

2.2最好找個“師父”

如果設(shè)計團隊里的領(lǐng)導(dǎo)或者組長愿意帶你，那么恭喜你你的運氣真的很好，因為去外面找個師父是很難的，而且也很貴。有人說怎么拜師還要收費？我看電視上、小說里，不是別人要搶著收徒弟嗎，這怎么還要徒弟給錢呢？古時候收徒是覺得這個人根骨不錯，以后能有大作為，同時可以傳承衣缽弘揚門派?，F(xiàn)在徒弟們學(xué)會了就自己飛走了，師傅們也沒有衣缽要繼承，反而師傅們還要養(yǎng)家糊口，所以找個師父變相成為了一種“交易”。

公司里有人帶和外面找?guī)煾赣惺裁磪^(qū)別？簡單說就是利益關(guān)系，大家自己揣摩。師父的主要作用是引導(dǎo)，在關(guān)鍵時期和階段可以給你指明方向，而不是幫你解決疑難雜癥。所以一個好師父可以讓你少走很多彎路，這是可遇不可求的。

3.1.做好職業(yè)規(guī)劃

其實大部分人對職業(yè)規(guī)劃很迷茫，不管是初入職場還是目前已經(jīng)工作了5、6年的老油條們，職業(yè)規(guī)劃就像是海市蜃樓，看得到摸不到，大概知道什么意思但是自己也不會做。

最近有一位工作了6年的設(shè)計師小伙伴遭遇了裁員，說實話6年在任何行業(yè)里都已經(jīng)算是中流砥柱的員工的，對自己的專業(yè)、職業(yè)能力也有了比較深刻的認(rèn)知，但是他就非常的焦慮，被辭職后簡歷和作品都無人問津，這就是很典型的缺少規(guī)劃所導(dǎo)致的走一步看一步的普遍現(xiàn)象。

職業(yè)規(guī)劃是需要有豐富的職業(yè)經(jīng)歷和實踐才能在階段性的生涯節(jié)點中做出計劃和調(diào)整的，如果你沒有任何經(jīng)驗是無法去做職業(yè)規(guī)劃的。職業(yè)規(guī)劃最重要的是我們對該職業(yè)的定位以及尋找正確的方向。比如你現(xiàn)在是個洗碗工，你想對自己做個職業(yè)規(guī)劃，如果你足夠敏感，那么你一定要思考到這個職業(yè)的瓶頸和上升通道的阻礙，什么時候會出現(xiàn)自動洗碗機，出現(xiàn)了你如何應(yīng)對，有什么差異化能力比的過自動洗碗機等等。

3.1.1職業(yè)定位

對于UI/UX設(shè)計師來說，職業(yè)定位很重要，它能夠幫你看清楚職業(yè)的特質(zhì)，可以指導(dǎo)你5-10年的職業(yè)變化與發(fā)展。所以比如你現(xiàn)在是做UI設(shè)計的，那么你要思考這幾個問題：

1.UI設(shè)計的工作內(nèi)容、作用和職責(zé)具體是什么，在不同規(guī)模企業(yè)中有什么區(qū)

2.UI設(shè)計師的工作可替代性是否強

3.UI設(shè)計崗位在行業(yè)中的天花板是怎么樣的

4.UI設(shè)計師的崗位晉升條件與級別是怎么樣的

5.你作為UI設(shè)計師的城河是什么

6.該崗位是否有政策風(fēng)險

7.該崗位與上下游的其他崗位相比價值如何

8.如何量化、突出該崗位的價值

所以如果你把UI設(shè)計師換成洗碗工或者其他崗位，再來念一下上面的8條。

3.1.2個人特質(zhì)

個人與職業(yè)需要契合才能走的更遠，如果你生性膽小、內(nèi)向、怯懦，那么就不太適合去做銷售，當(dāng)然如果你有勇氣去鍛煉、改變自己那也可以，但這很難，所以我們有句話叫做江山易改本性難移。該職業(yè)的工作內(nèi)容、職責(zé)對我們來說，如何發(fā)揮自己的優(yōu)勢，你個人有什么特質(zhì)在該職業(yè)中能發(fā)揮出來，這點很重要。

其實任何特質(zhì)的個人都可以去從事大部分職業(yè)，只是職業(yè)的高度有限，例如你本身不善于言談、辯論，個人內(nèi)向、社恐，不善于人際關(guān)系處理，那么，不進行專門的改變和調(diào)整，你的職業(yè)生涯和管理崗位或者專家等高級別崗位就無緣了。特質(zhì)當(dāng)然也是可以改變的，例如你可以自己上臺進行演講，大量的挑戰(zhàn)會逐漸改變你不善于社交的現(xiàn)狀。

所以你先要認(rèn)清自己個人特質(zhì)的范圍，再結(jié)合這個職業(yè)的定位，我們就可以知道自己應(yīng)該去改變什么，在該職業(yè)中的優(yōu)劣勢是什么。不過我遇到的大部分人都是，我很清楚，但我不改?？梢娨话?。

3.1.3晉升網(wǎng)格

謝麗爾·桑德伯格在《向前一步》中提到：職業(yè)通道不是線性，而是一種網(wǎng)格式的。我理解的大概就是這樣。

這種形式的職業(yè)通道設(shè)定的目標(biāo)不是具體崗位，而是個人綜合素質(zhì)的能力提升。也就是說我們的目標(biāo)不是朝著下一個級別去努力，而是在一個序列中前行幾步在平行到另一個節(jié)點去工作。例如你UI設(shè)計可能從初級晉升到資深，但是下一步你可能會去做交互的序列，當(dāng)你交互也達到資深后你又可以去做產(chǎn)品，但是這整個職業(yè)推進的階段我們都是一個人能力為核心目標(biāo)去工作，而不是為了某一個崗位更高級別。

這樣的職業(yè)通道好處就是你的能力會非常的綜合，能力會更全面。換句話說，你如果想達到UI設(shè)計專家，那么你不能只會畫UI界面，你不會交互、用戶研究或者更多視覺技能肯定是不行的，但我們最初的目標(biāo)并不是為了達到專家，而是讓自己有更多選擇。

3.2.黃金3年

我們需要利用前三年來打造一個完美賬號，那如果把整個規(guī)劃做到5、6年，那就不能算是開局賬號了對吧。為什么要規(guī)劃三年呢？我希望大家在前三年可以找到自己的定位和目標(biāo)，這三年里面你可以根據(jù)自己的能力和需求去尋找不同的平臺，看看以三年為期限，自己能不能也達成每年翻倍或者3年番兩番的目標(biāo)。（這里不是鼓勵大家盲目的跳槽）

首先我建議大家先利用1年左右的時間去提升設(shè)計技法，一項為主多項為輔助，例如你主要修煉UI界面的技法，同時輔助插畫、動效和更多表現(xiàn)類技法。為什么只用1年左右呢？

所以這1年其實時間很短，除了自己的工作以外，你需要把時間都拿出來做技法的修煉，是很枯燥并且沒有回報的。

設(shè)計師要學(xué)的更聰明，公司項目不行就要利用業(yè)余時間做額外的輸出，很多人就指望等下次跳槽的時候拿著現(xiàn)在公司項目的包裝放到作品集里去面試，如果你這樣做了，那么你開局賬號也就廢了一半，為什么呢？因為你的第一次跳槽是整個職業(yè)生涯中最重要的一次，甚至比第一份工作要重要的多，第一份工作你可能不會選，對這個職業(yè)、行業(yè)的認(rèn)知也幾乎沒有，隨機性很強。但是當(dāng)你要選擇第二份工作的時候，你是個成熟的寶寶了，自己也有了初步的規(guī)劃，你有機會、有能力去選擇更優(yōu)秀的平臺去輸出、學(xué)習(xí)。但是前提就是你能夠在第一份工作的時間里去積累能量，讓自己的能力有一個質(zhì)的變化，否則第二份工作也幾乎和第一份工作差不多。

在第二年的時候，如果你第一年足夠努力了，那么你可以找到第二份更好的公司，雖然不一定是大廠，但是至少可以在一個有規(guī)模的設(shè)計團隊里工作，這個時候你接觸到最多的應(yīng)該是更多的項目、方法和各種不同的思維。你需要和更多的人打交道，接觸更多復(fù)雜的業(yè)務(wù)以及學(xué)習(xí)更高深的設(shè)計技法。那么在第二年的階段，我希望大家可以去深入項目，去關(guān)注項目的本質(zhì)和目標(biāo)用戶。需求是怎么來的，設(shè)計方案為什么這么做，如何培養(yǎng)自己的產(chǎn)品和體驗思維。同時，業(yè)余時間也依然要進行輸出，但是和第一年不同，工作與業(yè)余時間的分配要更側(cè)重到工作上。

第三年，要學(xué)會自我驅(qū)動，關(guān)注設(shè)計價值的量化以及一些實用的方法，通過項目來將設(shè)計方法打磨的更成熟，形成自己的一套理論。同時自己的設(shè)計輸出也要圍繞著這些去做。

以上三年的階段性成長基本就是這樣，但這些都是比較理想化的情況，實際可能需要更長的時間或者更復(fù)雜的因素要去考慮。最后，大家覺得這樣3年肝出來的賬號可以算“完美”嗎？

原文地址：應(yīng)謀鬼計（公眾號）

作者： 應(yīng)駿

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI/UX設(shè)計師如何打造一個完美的開局賬號

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

認(rèn)識色彩飽和度的情緒：

因為不同的配色會帶給觀者不同的情緒感受，只有在先了解不同顏色特性的基礎(chǔ)上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺，這種感覺對應(yīng)什么顏色？只有搞懂了邏輯，在之后的工作中，才能為我們的配色方案指明方向，而不會一開始就被難住。如果我想配一個積極熱鬧活潑的畫面，顏色怎么配呢？ 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢？他們都有什么特點，為什么會這樣？往下看

積極活力：

我們先來看幾組圖片

用吸管工具提取一下它們的顏色觀察

我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。

通過顏色提取，再觀察它們選色的位置，可以發(fā)現(xiàn)它們的的配色的純度和飽和度都非常高。

這是為什么呢？接下來我們降低飽和度看看會發(fā)生什么：

可以很明顯的感受到畫面中已經(jīng)失去了那種動感、熱鬧和活力的感覺了，整體更趨于平穩(wěn)和安靜。

所以，高飽和度的配色會帶給觀者活力，動感，熱鬧的情緒。常常應(yīng)用于一些電商、運動品牌的視覺項目中，用來渲染or打造年輕、活力、熱鬧、動感等氛圍。

溫柔平靜：

我們再來看一組:

這一類圖片就會給人一種文藝小清新的feel，這類配色和熱鬧、運動的感覺完全不同。

都是低飽和度高明度的顏色。所以，低飽和度的顏色會給人傳達平和、放松、舒適的心情。

輕松休閑

這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性，不過高，也不會過低。

其實原理就是在取色器里，

我們看同一張圖片，給我們的感覺：

高飽和度配色給人感覺沖擊力很強，具有活力，對比非常強烈。

中飽和度畫面就弱了一級，視覺沖擊力沒那么強。畫面會放松一些，適合傳遞休閑的感覺。

使用低飽和度的顏色時，我們看到畫面更冷靜了，有些高級灰的感覺。

在以往的實際工作當(dāng)中，我也是先用飽和度來定畫面的大情緒基調(diào)，只有大的感覺對了，后面才不會出大問題。比如像一些戰(zhàn)斗、pk、熱血類的banner，都用高飽和顏色:

我們可以來吸取他們的顏色看看：

基本都是靠右邊的顏色。

而像我在做下面這種類型的banner時，就會使用到中飽和度的顏色，給人一種輕松休閑的感覺：

我們再看下他們的色域：

都是趨于中間的位置。

最后一種低飽和的顏色，像下面這種作品，就有一種文藝、清新的感覺：

再來看看他們的顏色色域

都是比較靠左的顏色。

用飽和度來定畫面的大基調(diào)，還是非常好用的，可以說是屢試不爽，大家可以好好理解并且用起來！

 總結(jié)：

高純度，高飽和度的顏色，會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官，常常應(yīng)用于一些電商、運動品牌的視覺項目中，用來襯托年輕、活力、熱鬧、動感等氛圍。

中飽和度的顏色飽和度和純度都適中，顯得中正平和，又不會有低飽和度那樣的“平緩“，想要視覺年輕一些，但又不想飽和度那么的強烈，可以嘗試選擇中度的顏色。

低飽和度的顏色，會給人平和，舒適的感受，常常會結(jié)合大量無彩色一起使用，讓畫面?zhèn)鬟f出簡約，自然，小清新文藝的感覺。

“你想給別人傳遞什么”

配色的方法有很多，搭配在一起千變?nèi)f化，但都離不開一個點。你想給別人傳遞什么感覺？是要年輕、活躍，還是安靜、唯美？只有明確方向，在想想這個方向上的顏色有什么規(guī)律可循？搞清楚目的，我們再去做配色是不是就會輕松很多？

原文地址： 菜心設(shè)計鋪（公眾號）

作者：慢熱

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何配色

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

目錄

• 一、什么是系統(tǒng)化解決方案，什么樣的團隊適合做
• 二、如何輸出、推進設(shè)計解決方案
• 三、解決方案的管理和發(fā)展

一、什么是系統(tǒng)化解決方案，什么樣的團隊適合做

1、什么是系統(tǒng)化解決方案？

大多數(shù)日常需求大多是從單點出發(fā)，當(dāng)點變多變復(fù)雜了，就容易出現(xiàn)上述說到的現(xiàn)狀問題。所以解決方案需要基于業(yè)務(wù)全盤進行設(shè)計抽象：從元素——組件——區(qū)塊——頁面——功能流程沉淀設(shè)計規(guī)則并代碼化，來靈活提供拼裝N個不同頁面的機制，幫助團隊更系統(tǒng)化的進行產(chǎn)品設(shè)計。從組成內(nèi)容不難看出，解決方案是需要建立在基礎(chǔ)組件基礎(chǔ)上，與基礎(chǔ)組件、復(fù)雜組件、行為模式共同組成設(shè)計系統(tǒng)的【功能模式】部分。

2、什么樣的團隊適合做

解決方案是一套相對穩(wěn)定的設(shè)計機制，所以在產(chǎn)品初期或團隊建立初期，產(chǎn)品可能經(jīng)常會調(diào)整的情況下，并不適合做。初期可以借助成熟的設(shè)計系統(tǒng)來減少投入成本。而到成長期可以根據(jù)業(yè)務(wù)的發(fā)展梳理基礎(chǔ)元素、組件，選擇性的建立部分穩(wěn)定且利用率高的解決方案，并持續(xù)發(fā)展，保證解決方案可以起到指導(dǎo)和提效的作用。隨著產(chǎn)品或團隊逐漸成熟，解決方案也應(yīng)該隨著一起成長，相互影響相互作用。

二、如何輸出、推進設(shè)計解決方案

1、由大到小的進行信息拆解

1）對產(chǎn)品頁面（尤其是重點功能）進行盤點，劃分頁面類型：比如列表、表單、詳情、dashboard；

2）對頁面中的內(nèi)容進行區(qū)塊歸類

3）對區(qū)塊中的信息進行拆解

這三個過程下來，對于問題、規(guī)則、規(guī)律都會有一定的概念。以一個后臺系統(tǒng)為例

1）頁面大類主要是：列表、表單、詳情。

2）其中列表的內(nèi)容大致區(qū)塊分為：頁面標(biāo)題區(qū)、列表操作、列表篩選、列表內(nèi)容，到這個階段已經(jīng)可以發(fā)現(xiàn)，相同區(qū)塊位置就存在不穩(wěn)定，在后臺系統(tǒng)中可能影響面不會非常大，但對于內(nèi)容復(fù)雜繁多的工具或C端界面就會容易出現(xiàn)找不到的情況。

3）不同區(qū)塊的內(nèi)容拆解，同樣也會發(fā)現(xiàn)一些細(xì)節(jié)問題，比如篩選的樣式、規(guī)則不一致，列表操作的方式、位置、樣式、交互不一致等等

2、抽象、重組：從布局——區(qū)塊——組件——設(shè)計規(guī)則

從第一步全盤的信息拆解和歸納, 已經(jīng)發(fā)現(xiàn)問題, 這一階段主要2點：第一是如何通過設(shè)計規(guī)則來避免同樣的問題產(chǎn)生，第二是如何通過簡單的規(guī)則重組減少多人合作記憶復(fù)雜度。思路類似于設(shè)計一個界面，首先得有一個布局劃分，不同的區(qū)塊要放哪些內(nèi)容，再到區(qū)塊里的細(xì)節(jié)內(nèi)容規(guī)則，從而抽象出由布局到區(qū)塊的設(shè)計規(guī)則和可復(fù)用的組件。

以前面說的列表為例

1）區(qū)塊主要是4類，明顯的問題是區(qū)塊位置不穩(wěn)定，所以在布局結(jié)構(gòu)上，需要定義1-2個穩(wěn)定的可配置的布局框架來適應(yīng)不同的內(nèi)容

2）不同區(qū)塊梳理組成內(nèi)容，內(nèi)容細(xì)則

3）標(biāo)記出可組件化的內(nèi)容及規(guī)則

4）提煉整個過程中通用的設(shè)計規(guī)則，作為全局的指導(dǎo)。如：國際化、排版規(guī)則、超限規(guī)則、適配規(guī)則、文案規(guī)則等等。

通過布局——區(qū)塊——組件——設(shè)計規(guī)則，可以靈活的進行頁面拼搭

3、落地代碼庫

區(qū)分通用層和業(yè)務(wù)層，通用層落地到通用模板市場，利用腳手架生產(chǎn)新頁面。業(yè)務(wù)層面的落地則是基于通用庫封裝具備業(yè)務(wù)屬性（如：業(yè)務(wù)主題、業(yè)務(wù)數(shù)據(jù)、業(yè)務(wù)拓展方案）的業(yè)務(wù)庫來生產(chǎn)新頁面。

目前群核設(shè)計團隊建立了一套平臺通用的解決方案，適用于所有中后臺產(chǎn)品。業(yè)務(wù)屬性比較強的產(chǎn)品也基于通用解決方案封裝業(yè)務(wù)層面的解決方案，同樣的思路也應(yīng)用在不同體系的工具場景中。整體實踐下來，產(chǎn)研效率提升近50%，甚至完全解放了一條業(yè)務(wù)線的設(shè)計資源。產(chǎn)品體驗的一致性、上線質(zhì)量也有明顯的提升

三、解決方案的管理和發(fā)展

解決方案作為設(shè)計系統(tǒng)的一部分，與設(shè)計系統(tǒng)一同管理，業(yè)務(wù)設(shè)計師使用系統(tǒng)來輸出，反饋問題或需求給系統(tǒng)，有系統(tǒng)設(shè)計師判斷可行性，周期性的管理，及時更新并在內(nèi)部互通，促進互相成長和發(fā)展。

解決方案與設(shè)計系統(tǒng)的發(fā)展有一點不同的是解決方案有更多業(yè)務(wù)化的內(nèi)容，業(yè)務(wù)團隊根據(jù)業(yè)務(wù)迭代維護解決方案。當(dāng)業(yè)務(wù)的方案達到通用級別，則列入到通用庫。

這些方法和思路也并不限制行業(yè)或產(chǎn)品類型，僅是在我們當(dāng)前服務(wù)的產(chǎn)品體系下總結(jié)的方法。當(dāng)然解決方案并不能解決所有問題，只是希望在提供更系統(tǒng)化的設(shè)計方法和模式的同時能減少重復(fù)工作提升效率，讓產(chǎn)研團隊有更多的精力和時間投入更有價值的事情。

原文鏈接：酷家樂用戶體驗設(shè)計（公眾號）

作者：十元

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何有效提升產(chǎn)研效率和質(zhì)量

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

其實畫冊的標(biāo)題也能排出許多新意，本篇文章，蔥爺來給大家分享幾個可以給畫冊設(shè)計加分的標(biāo)題排版技巧。

01.描邊字錯位組合

上圖是某院校招生畫冊的“學(xué)院簡介”排版，由于太過講究對齊，缺少變化，所以顯得不夠靈活，我們可以把標(biāo)題的中英文詞匯拆開進行錯位排版，錯位時要注意左右的平衡，另外，三行錯位比起兩行錯位的變化會更豐富一些。

單純只是做錯位處理，效果并不怎么好，因為沒有層級關(guān)系，所以可以再加上字號大小的變化，突出重點詞匯，弱化次要詞匯。

這樣層級豐富多了，但是眾多很粗很黑的字體擠在一起略顯壓抑，把其中部分詞匯改成描邊后，整體就變得更透氣、更有設(shè)計感一些了，注意描邊要細(xì)一點，以避免描邊的筆畫重疊在一起影響識別性和美觀性。

標(biāo)題排好以后，再根據(jù)標(biāo)題調(diào)整一下內(nèi)文、頁眉、頁碼的排版，內(nèi)文通常會對齊標(biāo)題中的某個字詞，但一邊對齊就好，不需要兩端都對齊，頁眉、頁碼可以作為裝飾來排版，填充一點顏色可以讓版面變得更活躍。

02.彩色標(biāo)題疊加灰色圖片

還是拿前面的那個案例舉例，把學(xué)校圖片換成一張沒有去底的矩形照片，然后把它處理成黑白色照，移動至版面上方，標(biāo)題使用藍色壓住圖片的左上角，這時標(biāo)題就不是孤立的幾行文字了，而是與圖片形成了一個整體，這種排版方式在網(wǎng)頁設(shè)計中比較常見，用于畫冊的標(biāo)題排版，效果也是很不錯的。

圖片做出血處理顯得更大氣，左下角的頁碼與標(biāo)題左對齊，可以加強版面的整體性和關(guān)聯(lián)性。

03.手寫體搭配黑體

同一個標(biāo)題我們通常只會使用一種字體（不包括英文），但有時候也可以試試用兩種字體搭配來使用，比如手寫字體搭配無襯線字體，這兩種字體在風(fēng)格上完全不一樣，對比非常強烈，能夠給版面帶來新意。

正文刻意與標(biāo)題進行了錯位排版，當(dāng)然，同時也保持著某些對齊關(guān)系，圖片的排版同樣如此，與正文錯位，但與標(biāo)題左對齊，整個版面既靈活又很有序，符合學(xué)校畫冊的調(diào)性。

04.文字疊加色塊

加色塊是標(biāo)題設(shè)計中常用的手法，但如果只是用一個色塊把標(biāo)題包住，那么效果是比較普通的，很容易像促銷折頁的做法。所以我們可以只把色塊作為標(biāo)題的一個裝飾元素，用一個小小的色塊放在標(biāo)題后面，使其視覺上更豐富、更突出。

圖片的刻意錯位很關(guān)鍵，如果圖片與正文兩端對齊，那么英文標(biāo)題、正文、圖片、頁碼都是沿著一條直線對齊的，整個版面就會變得生硬很多。

文字加色塊還有另一種效果也不錯，即把文字色塊合并在一起做成補丁效果，首先把文字錯位排版，然后分別給每一行文字加一個色塊把文字框住，色塊與色塊上下相連。

搭配上序號和英文標(biāo)題，豐富標(biāo)題的對比關(guān)系，使其更美觀、更有設(shè)計感，色塊可以根據(jù)需求適當(dāng)超出文字的長度。

正文的排版我做了一點改變，把第一段單獨拿出來作為引文使用，剛好這段文字在內(nèi)容上也正好是起到提前說明的作用，這樣處理后這個版面也變得有了一些新意，標(biāo)題十分顯目。

05.手寫體跨版

在畫冊設(shè)計對于有些版面，可以排得大氣一點，比如把原本可以1P排完的內(nèi)容排成一個跨P，這時標(biāo)題也可以拉大跨版排列，這種做法可以加強文字的大小對比，也會有更多留白空間。

為什么用手寫體呢？宋體和黑體不行嗎？其實也可以，不過由于漢字的筆畫比較復(fù)雜，宋體和黑體又比較方正，所以拉太大排列時會顯得不夠靈活，如果是英文則會好一些，所以在排版的時候我還做了了傾斜與裁剪處理，并且搭配了英文進行錯位排版，不然會顯得過于單調(diào)。

06.標(biāo)題與正文左右排版

在豎版的畫冊中，我們通常喜歡把標(biāo)題排在正文的上方，而如果把標(biāo)題與正文左右擺放，那么又會有種不一樣的感覺。

但不要把標(biāo)題與正文水平對齊，那樣的話標(biāo)題的空間就過小了，會顯得很壓抑，而是要把標(biāo)題放在正文的左上方，并保持某些對齊關(guān)系。

如果把這種排版方式看成是分欄網(wǎng)格，那么它屬于不對稱網(wǎng)格，即正文欄應(yīng)該比標(biāo)題欄更大一些，以保證有足夠大的空間排列正文內(nèi)容。標(biāo)題欄可以有大量留白，頁腳可以與標(biāo)題形成呼應(yīng)，豐富版面的細(xì)節(jié)。

07.扭曲標(biāo)題

這種標(biāo)題處理手法在海報設(shè)計中比較常見，其實國外很多畫冊也這么做，效果很酷，沖擊力很強。

拉拽錨點左右兩邊的手柄使波浪形變得柔和一點。

波浪效果做得差不多后，按快捷鍵E調(diào)出自由變換工具面板，并選擇自由扭曲工具，把標(biāo)題扭曲成如下效果。

再調(diào)整一下細(xì)節(jié)，然后把它放在版面中，把內(nèi)容篇章的序號處理成描邊樣式與標(biāo)題疊加在一起，可以起到裝飾的作用。

扭曲的標(biāo)題搭配上鮮艷一點的顏色，效果會更時尚，對于這種版面，正文也不要排得過于規(guī)矩，所以，我刻意把版面中的兩張圖片做了錯位處理。

08.打散排列

通常我們會把標(biāo)題文字集中排放，但對于設(shè)計和時尚類畫冊，我們可以打破傳統(tǒng)的做法，把標(biāo)題做適當(dāng)?shù)姆稚⑴虐?，效果也很不錯，當(dāng)然，標(biāo)題文字如果太少就不合適了。

另外，為了使標(biāo)題更特別 ，給文字加上下劃線效果會更好，并且下劃線可以根據(jù)需求適當(dāng)延長，以加強這些分散文字的關(guān)聯(lián)性，甚至還可以加上英文做裝飾。

正文的排版與標(biāo)題文字左右兩端保持對齊。

設(shè)計是一個不斷嘗試、調(diào)整的過程，排標(biāo)題同樣也是如此。另外，標(biāo)題的排版固然是很重要的，但是想要整體效果得到比較大的改善，正文、圖片、頁眉、頁腳、頁碼的配合也很重要，永遠要把整體的大效果擺在第一位。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉(zhuǎn)載請注明：學(xué)的UI網(wǎng)》讓設(shè)計感暴增的8個畫冊標(biāo)題排版技巧

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

前言

業(yè)務(wù)性強，內(nèi)容復(fù)雜度高是To B產(chǎn)品的典型特征。新用戶需要快速認(rèn)知平臺能力并順利上手，老用戶則需感知信息的變化、功能的拓展并迅速響應(yīng)。體系化的幫助是通過在操作的不同階段提供差異化的引導(dǎo)及反饋，助力用戶在應(yīng)用中成長。

幫助體系是什么

通過大量的案例積累及系統(tǒng)調(diào)研，發(fā)現(xiàn)“幫助”并不是單一的某個功能，而是一種體系化的能力，需要通過不同手段來實現(xiàn)。概括來說就是“在產(chǎn)品使用不同階段為用戶提供恰當(dāng)?shù)奶崾九c指引，通過組件的靈活應(yīng)用及能力創(chuàng)新，幫助用戶降低認(rèn)知成本，提升操作效率?！?/strong>