設計師拿到開發剛寫好的頁面時，往往會眉頭一皺，這跟自己的設計稿差別有點大啊。在設計走查的時候才發現，幾乎每個頁面都有大大小小的問題。從顏色樣式到按鈕組件、從元素尺寸到界面布局，都多多少少存在偏差。開發一般情況都是在完成功能開發后，才對頁面視覺進行統一優化，但是無奈需要優化的地方太多太分散，成倍地增加了工作量。

那么能否制定一套協作方案，把固定的、通用的和可復用的元素或組件封裝起來，運用在項目初期設計和開發的工作流程中。從而統一地把控設計項目中的所有可變元素，方便設計師和開發在項目中后期做各種改動，同時也利于項目的迭代升級呢？

這里我做了以下思考，歡迎大家一起來交流探討。

/目錄

一、寫在前面

二、控件封裝

三、布局規范

四、標注語言

五、總結

一、寫在前面

UI設計要有組件化、模塊化、結構化的思維。以各平臺設計規范為基礎，從控件封裝、布局規范和標注語言三個方面，構建一套設計師和開發之間的共同語言。

/文字&文本

在封裝前我們先定義一下設計中最常用到的元素——文字。文字在UI界面中幾乎撐起了絕大部分內容，它的功能包括但不限于標題導航、內容構建、說明解釋、標簽示意等等。把文字跟圖標、背景等元素組合起來的時候，在界面中形成了更明確的意符。

（一）換行規則

文字在界面中的顯示方式可分為標簽、短文本、長文本三種。標簽和短文本一般情況下不換行顯示、如在特殊情況下會超過一行，則使用省略號顯示。長文本特指會換行顯示的文本。

（二）行高設定

各系統平臺都有自己默認的字體行高規則，但是這些行高規則并不統一，比如iOS的字體行高對照表如下：

來源見水印

而且默認的行高在展示長文本（多行顯示）時，效果并不一定理想，甚至可能會很丑陋。所以我們需要制定統一的標準來規范各平臺的字體設計和開發規則。

解決方案：對于標簽和短文本默認設定1倍行高，長文本根據文本內容和字號大小來設定行高，以達到最佳閱讀效果。

行高設定

（三）視覺間距

規范短文本行高，確保視覺間距等于實際標注間距，才能保證開發準確還原界面布局。

視覺間距示意圖

/特殊情況

有些控件的文本長度在少數特殊情況下會換行顯示，為了簡化適配過程，我們可以直接使用長文本來設計。

（一）Toast

（二）橫幅

/圖標&切圖

圖標在某些場景下可以無需文字說明，更直觀簡潔地表達含義。設計同一類圖標時應該保持視覺效果統一，視覺尺寸可以通過使用模板來進行規范。

圖標設計模版

為了保證同一組圖標的影響范圍相同，我們在設計圖標時首先設定視覺安全區域，然后加入透明度為1%的背景作為影響范圍圖層。切圖時需把影響范圍圖層包含進去，不僅便于設計師規范所有圖標的尺寸大小，也方便開發直觀獲取到圖標的實際切圖大小。

圖標設計示例

二、控件封裝

利用組件化的思維，將可重復利用的元素或者控件打包成固定的模版，稱之為封裝。

這里設計師可以使用Sketch的文字、圖層、組件封裝功能，構建可協作、方便維護、完整的控件庫。程序員在構建項目框架時，也應對每一個元素進行可復用性封裝。

（一）封裝基礎顏色

基礎顏色有主色、輔色、強調色、中性色（灰色）、功能色（成功、失敗、警告、不可點）等。

在sketch中，新建一個圖層，設定好圖層樣式，點擊新建圖層樣式完成封裝。封裝樣式按固定格式“類別/編號+顏色”來命名，其中“/”可以自動識別為列表層級。

顏色封裝

（二）封裝常用字體

每個項目都應該設定常用字體庫，例：導航標題、文章標題、正文、說明、鏈接等等。

在sketch中，新建一個文本，設定好文本樣式，點擊新建文本樣式完成封裝。封裝樣式按固定格式“主類別/二級類別/顏色”來命名，其中“/”可以自動識別為列表層級。

字體封裝

（三）封裝圖標

APP項目中的圖標大小一般設定為20px、24px、28px、32px、44px等。

在sketch中，新建圖標影響范圍圖層，設定安全區域，畫好圖標后點擊新建symbol按鈕。封裝的圖標按固定格式“范圍/具體位置/名稱”來命名，其中“/”可以自動識別為列表層級。

圖標封裝

（四）封裝按鈕

按鈕一般情況下有兩種適配方案，第一種固定邊距，第二種固定尺寸。封裝時結合Dynamic Button 3.5插件，可以動態制作同類型按鈕。

在sketch中，利用已封裝好的字體和顏色來組合成按鈕的文本和背景，文本命名格式為“上邊距：右邊距：下邊距：左邊距”，如果上下和左右邊距并分別相同，則只需要給出上邊距和右邊距的數值。如“10:20”。按鈕背景命名為BG，設定為已封裝的顏色。執行一次“?+J”的操作，關聯文字和背景，然后將兩者用symbol封裝。

封裝后取消Dynamic group編組

由于按鈕大小會根據內容文字長度而改變，因此需設定合理的適配規則。

固定文本左上邊距和高度

固定背景的高度

（五）統一維護

基礎元素樣式可以放在一個畫布上進行統一管理。

顏色和字體可以統一管理

三、布局規范

利用模塊化思維進行布局，將由已封裝的組件構成的功能區編組成一個模塊，模塊可以自由排列組合，增加或刪除。

（一）基本框架

界面布局應遵循各平臺基礎設計規范，iOS和安卓的基本框架不能混用。

安卓&iOS對比圖

/開發規范

制作高保真設計稿時我們統一使用iOS設備的750*1334分辨率，對應Android的720*1280分辨率。無需新出一套設計稿。

iOS和Android設備在設計和開發時應該注意的差異，基于1倍標注

/視覺上

a. iOS狀態欄20pt，Android狀態欄25pd

b. iOS導航欄44pt，Android導航欄48pd

c. iOS菜單欄49pt，Android菜單欄48pd

/交互上

a.  Andriod有物理返回按鈕，點擊控制返回上一步操作，而不僅僅返回上一個頁面；iOS沒有實體返回按鈕，導航欄的back按鈕控制返回應用內的上一層頁面。因此在設計時每個頁面都應該有明確的返回或關閉按鈕

b. 導航標題的位置iOS居中顯示，Android靠左

c. 安卓對列表操作欄的處理為長按，iOS為左滑。實際處理的時候可以分開設計，也可以設計成統一的操作方式

（三）模塊化布局

模塊化布局對于設計師來說可以使頁面功能和信息分布清晰明了，對于開發來說也更利于進行頁面布局。

例一：主界面

例二：內容頁

四、標注語言

利用sketch插件導出可自助查看標注的html文件，標注文件無需手動生成，也不會對設計稿造成遮擋。但是開發要花更多精力去對每一個元素的樣式、間距進行點擊查看，相比之前直觀的標注，增加了閱讀成本。

為此我們設計一套標注方案，可以通過少量標注，提供準確的多界面適配信息。標注規則是對由適配不同屏幕造成歧義的地方做針對性地標注說明。

（一）固定框架

在設計界面時，首先設定界面的固定框架結構，如頁面內容區的安全邊距。

全局界面安全邊距設定

/模塊外間距設定

多個模塊之間的間距設定

模塊間距設定，一般情況下可以不做標注

/模塊內安全區域

模塊內部組件和元素的影響范圍

模塊內安全區域標注

（二）基本標注類型

規范好界面的布局和模塊的構建方式后，針對模塊或者組件在適配過程中會變動的部分，或者固定不變的部分，特別標注說明。其余沒特別標注的部分按照默認標注尺寸來布局。

/固定高

固定區域高度

/固定寬

固定彈出框寬度

/固定百分比

固定圖形所占頁面的百分比

/固定邊距

固定邊距

/固定比例（Fixed Ratio）

固定模塊寬高比

/等分分布

等分分布

/范圍內居中

在標識的范圍內居中分布

（三）標注實例

因此方案尚未落實到實際項目中，因此在這里以網易云音樂為例，按新的標注方案進行剖析說明。

例一

例二

例三

例四

五、總結

文章內容更多偏向指導設計師如何規范設計方法，同時創造了幾種標注語言（FR、ED、AC等）。后期組織設計和開發同學一起就此方案進行交流討論，給大家普及這種設計和標注方法，讓設計師和開發能夠就組件封裝和標注語言的方案達成共識，方便后期協作，提高工作效率。同時聽取多方觀點，對此文檔進行不斷優化完善。

一、用戶體驗初定義

我們先了解下UX，UX的全稱是 User Experience，翻譯過來就是「用戶體驗」，從全稱來看會發現其實也有UE的叫法，但是UX的叫法更加常用。

在國際標準ISO 9241-210中隊UX的定義是：

a person's perceptions and responses that result from the use or anticipated use of a product, system or service.

一個人對某個產品或系統或服務在使用前、使用時、使用后產生的感受和反響。

這里可以做以下定義，用戶體驗即用戶的產品使用『主觀感受』，用戶體驗好即用戶感受愉悅。

二、用戶體驗專業設計方法論構建

需要明確用戶體驗設計師的專業技能，就需要先了解用戶體驗五要素，其中包括戰略、范圍、結構、框架、表現五個層面。

用戶體驗五要素之能力層解讀 ——將此進行拓展說明，相應的就出現了用戶體驗設計師需要掌握的一些具體技能。

以上五要素拓展出來的專業技能需要設計師去進行延展和探索，構建實際業務工作中的技能體系，培養專業技能是用戶體驗設計師進階的第一步。

那么除去以上的基礎技能，設計師還需要搭建針對相關領域的設計方法論，以下列舉幾個B端設計的方法論進行逐一闡述。

設計方法論 | 管理客戶訴求與用戶需求

客戶訴求有很多種，沒有固定的形式，即可以是單個人或者幾個人的特殊意志體現，也可以是一批人的特殊需求。用戶需求是站在用戶的場景中去思考，找出最典型用戶的需求，以此來支持產品設計等。

（1）如果是第一種情況，即少數人的特殊意志體現，此時的客戶訴求與用戶需求的關系很好理解，結合上面對于用戶體驗五要素的能力層解讀，客戶訴求即產品目標，包括『商業盈利目標』與『品牌傳達』，具體可以提現在廣告運營設計、品牌置入、打單銷售界面展示等。而用戶需求則是上述圖中的用戶研究與人物角色下的場景化普遍需求。

下圖示意：

（2）如果是第二種情況，即此時的客戶訴求也是一批用戶的需求，這個時候用戶需求包括客戶訴求，這種情況下最好的例子就是客戶訴求是產品管理、分析模塊，用戶需求是產品常規使用模塊。只需求找準相應的場景即可以兩邊都很好的滿足。

下圖示意：

設計方法論 | 向導體系的搭建

有一個很形象的比喻，C端軟件如果是7-11的話，B端軟件就是大型購物中心。

每一個大型的購物中心都有自己的『導視系統』，導視系統再關鍵的時候指引用戶下一步該怎么走，防止用戶在復雜的樓層中反復需找商店，浪費時間或者干脆找不到。

作為復雜B端系統，也需要有自己的向導體系來支持用戶使用，其中：

• 『新手向導』主要是針對小白用戶的功能層、內容層的初步介紹；

• 『業務流程引導』主要是針對復雜流程的分步引導，降低使用難度；

• 『異常情況引導』是針對異常操作的容錯機制，這一步往往需要用反常規的方式思考用戶習慣；

• 『復雜信息說明/提示』是對低頻/專業元素的穿透解釋；

• 『幫助中心』或者叫問答機器人，就是針對用戶的問題庫。

在使用以上內容時，需要切記一個原則：需要的場景，合理的出現

設計方法論 | 制定復雜界面的響應規范

Web設計布局中存在靜態布局、流式布局、自適應布局、響應式布局、彈性布局；其中響應式布局可以保證在任何終端上都能顯示出讓人滿意的效果，所以在復雜界面的設計下普遍采用『響應式設計』。

響應式設計一般糅合了靜態布局+彈性布局+流式布局，再搭載媒體查詢技術使用（分別為不同的分辨率定義布局）。

在該體系下，使用響應的布局規則需要依據頁面元素的屬性與業務要求結合判斷，例如：列數較多的表格，場景要求每列都需要顯示全，且預估用戶可接受適當范圍的橫向滾動，再設定好部分重要的固定列后，采取靜態局部的方式來展示該長表格。

設計方法論 | 卡片式設計

在B端場景中，為了增加信息展示的形式，在列表識設計的基礎上，引入了卡片式設計。相應的，我們需要知道卡片式設計有哪些優點，才能在合適的場景使用。

卡片式設計的創新點主要體現在空間利用上、內容突出上、跨終端能力以及視覺傳達上，謹記以上點可以指導關鍵運用場景的判斷。

相關閱讀：從列表式UI中升華探討：卡片式UI有哪些創新點

設計方法論 | 用戶意圖管理

通過『用戶意圖理解』來完成『產品易用性』的提升，可以最大化機器能力在人機交互中的效益。具體操作即在『機器能力』與『用戶分險』之間尋求平衡點，設定體驗目標，以打造產品的智能體驗。

相關閱讀：設計方法論 | 如何構建產品的智能體驗

此外還有『有意義的動效設計』『頁面布局方法論』『灰度測試』『多語言下的字體規范』等設計方法論需要去掌握和了解。

三、全鏈式設計師能力模型

評定一個設計師的能力是否優秀，除了需要掌握必備的專業技能外，還需要包括各項達標的通用技能。

專業技能決定設計師可以站的多高，通用技能決定設計師可以走的多遠。

通用技能主要包括溝通能力、協作能力、項目把控能力、設計落地能力、總結能力、創新能力等。

• 溝通：確定溝通目標，提取雙方溝通重點，反推需要收集的信息；

• 協作：了解對方工作規劃側重點與KPI目標，找到規劃交集；

• 項目把控：時刻謹記四象限工作法，重要的事情有規劃分階段輸出；緊急的事情快輸輸出保證進度，可后期迭代；

• 設計落地：明確設計方案帶來的效益，還需要考慮『用戶需求/場景』與『開發資源』，在業務側得到認可，獲得支持，達成共贏。傳送門：設計師如何更好的展示創新設計方案。

• 總結歸納：對于項目，學會提取核心業務邏輯+關鍵交互細節。有一個小竅門是，階段性的給自己做的項目提取關鍵詞，關鍵詞的提取即是項目的最小單元的總結。

• 創新：養成跨界研究學習的能力，除了多去體驗同行業的產品外，跨界的其他行業的體驗往往會帶來新的靈感，因為體驗的本質是一致的。

通用能力的培養往往是慢慢磨練和積累，循序漸進，需要結合自身性格打造符合自己的能力風格。

四、設計師工具集

工欲善其事必先利器，稱手的工具可以讓設計事半功倍。

1. 戰略層、范圍層

產品前期的階段，更加注重創意的提出或者核心的理念，需要制定設計方向。這個時候的關鍵點在于洞察問題，包括：目標人群、用戶需求、應用場景、場景痛點動機、商業目標、機會分險成本等。

該階段的行動項需要執行頭腦風暴、問卷調查、用戶訪談、焦點小組、任務角色共情圖、故事板等，其中大部分都可以通過手繪快速推進，其中可以結合便利貼、工具尺等等。

在范圍層還設計到的知識點：心智模型、卡片分類、KANO模型、品牌層次理論等。

2. 結構層、框架層、表現層

產品中期的階段，涉及到較多的產出物與知識點，其中：

1. 思維導圖的工具可以選擇XMind、Mindmanager；OS X系統推薦使用MindNode，希望線上協作的話可使用Process On。

2. 低保真原型最常使用的即Axure，強烈建議配合典型頁面庫、組件庫、控件庫使用，快速調出各項需要的元素可以極大提高原型制作效率。

3. 高保真視覺設計稿里最常規的就是萬能的PS，條件允許的話推薦使用Sketch，這款軟件只能在OS X系統下運行，但是確實越來越多設計的選擇和標配。

4. 高還原交互展示可以運用的軟件比較多，其中墨刀最常見，希望更精細化的展示可選擇Principle或者Protopie。

動效設計主要使用Adobe After Effects，Framer和Adobe Animate也可以考慮。

設計工具多種多樣，選擇合適且大眾的，即又好協作。

3. 其他：項目管理、歸納、總結

團隊協作推薦藍湖，該軟件下設計師可以交付設計稿，產品經理清晰表達需求和邏輯，工程師查看標注與自動生成代碼，輕松上手，協作。其他可選擇Teambition、Worktile等。

結語

本章主要介紹了用戶體驗設計師的整體能力框架，旨在幫助大家更加系統和分階段地學習用戶體驗。

在體系化的能力框架指導下，新人設計師需要快速找到自己的優勢方面加以強化，弱勢方面加以補充，時刻明白下一步目標。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計