編輯導(dǎo)讀：在設(shè)計(jì)流程中，交互設(shè)計(jì)師需要建立交互設(shè)計(jì)文檔（DRD），以清晰地向團(tuán)隊(duì)成員展示頁(yè)面設(shè)計(jì)細(xì)節(jié)與交互設(shè)計(jì)輸出，進(jìn)而有效降低溝通成本，推動(dòng)業(yè)務(wù)進(jìn)程。本篇文章里，作者總結(jié)了提升輸出效率的3種方式和提升設(shè)計(jì)質(zhì)量的3種方式，一起來(lái)看一下。

上篇講了「交互文檔常見(jiàn)誤區(qū)」和「交互文檔7要素」，剩下的兩章：「提升輸出效率的3種方式」和「提升設(shè)計(jì)質(zhì)量的3種方式」現(xiàn)在為大家奉上。

三、提升輸出效率的3種方式

在軟件熟練掌握的基礎(chǔ)上，還有3種提升輸出效率的方式。

3.1 優(yōu)先選用低保真

有些視覺(jué)出身的交互設(shè)計(jì)師可能糾結(jié)于交互文檔是否要做的跟設(shè)計(jì)稿一樣，增加很多的交互操作和動(dòng)態(tài)效果。關(guān)于高保真和低保真該選哪個(gè)，唯一參照的依據(jù)就是，你的交互文檔使用場(chǎng)景是什么，目標(biāo)用戶是誰(shuí)。

如果你的使用場(chǎng)景是在公司內(nèi)部開(kāi)發(fā)使用，目標(biāo)用戶是和你合作的前后端開(kāi)發(fā)人員以及產(chǎn)品、UI，那么你的文檔是為了提高開(kāi)發(fā)效率而存在的，這時(shí)你不需要做成跟視覺(jué)稿一樣的，你只需要用黑白灰的線框圖做好產(chǎn)品的原型即可，這樣做的好處有四個(gè)：

1. 設(shè)計(jì)效率極高，能快速完成產(chǎn)品原型設(shè)計(jì)；
2. 修改方便，在原型階段，交互稿的改動(dòng)是非常頻繁的，因此如果你做的跟視覺(jué)稿一樣，加了很多交互操作，那改動(dòng)簡(jiǎn)直會(huì)要了設(shè)計(jì)師的命；
3. 適合開(kāi)發(fā)拋開(kāi)細(xì)節(jié)快速查看，頁(yè)面有很多UI元素的時(shí)候，會(huì)影響開(kāi)發(fā)（后端）梳理邏輯，因?yàn)檫@些細(xì)節(jié)會(huì)誤導(dǎo)他，更何況UI界面的元素本身是多變且不確定的，開(kāi)發(fā)在開(kāi)始時(shí)只需要梳理業(yè)務(wù)邏輯即可，至于UI，那是視覺(jué)設(shè)計(jì)稿和前端的事，在交互階段并不存在這個(gè)問(wèn)題；
4. 可以讓UI充分發(fā)揮自己的設(shè)計(jì)感，設(shè)計(jì)出更加出彩的界面。我們作為交互設(shè)計(jì)師，只需要關(guān)注頁(yè)面的交互和業(yè)務(wù)的邏輯，無(wú)需關(guān)心元素的圓角和陰影的大小。如果你的交互稿做的跟UI視覺(jué)稿一樣，會(huì)在主觀上影響UI設(shè)計(jì)師的判斷，甚至可能會(huì)引發(fā)同事之間的矛盾。

如果你的使用場(chǎng)景是項(xiàng)目演示，目標(biāo)用戶是沒(méi)有軟件開(kāi)發(fā)相關(guān)知識(shí)的老板、甲方（客戶）、測(cè)試用戶，你就需要根據(jù)你們自己的需求，建立一套可點(diǎn)擊、可跳轉(zhuǎn)的高保真原型demo，用以在項(xiàng)目演示的時(shí)候給客戶或老板進(jìn)行演示操作，給他們一個(gè)直觀生動(dòng)的印象，如果他們擁有絕大部分的決策權(quán)的話，會(huì)有很大的幾率通過(guò)方案。

因此，關(guān)于高保真和低保真的爭(zhēng)論沒(méi)有必要，選擇哪一個(gè)完全看交互原型的使用場(chǎng)景和目標(biāo)用戶。就我個(gè)人來(lái)講，一般工作場(chǎng)景下，我是不建議將交互文檔做成視覺(jué)稿的！

3.2 制作交互組件庫(kù)

組件庫(kù)就像一個(gè)工具箱，在交互設(shè)計(jì)的過(guò)程中不需要每個(gè)頁(yè)面元素都單獨(dú)去繪制，或者不同的設(shè)計(jì)師重復(fù)繪制，只需要在工具箱里面取出運(yùn)用即可，這樣能夠大大提升交互稿的輸出效率。組件庫(kù)包含配色元素、字體元素，按鈕元素，以及其他控件元素等，產(chǎn)品設(shè)計(jì)開(kāi)始就應(yīng)該定義好這些基本規(guī)范，不僅能保證產(chǎn)品的一致性和統(tǒng)一性，還能提高產(chǎn)品的設(shè)計(jì)效率，同時(shí)也方便其他人接手。

3.2.1 配色元素

在交互設(shè)計(jì)過(guò)程中，為了保持視覺(jué)的統(tǒng)一性和可閱讀性，通常會(huì)有一套簡(jiǎn)單的配色方案，配色方案確定了產(chǎn)品的主色調(diào)和輔色調(diào)，所有的控件和元素都應(yīng)用這一套配色來(lái)設(shè)計(jì)。

3.2.2 文字元素

文字是交互稿里面最基礎(chǔ)也是最高頻使用的元素。

3.2.3 其它控件元素

還有很多可以模板化的交互組件，大家可以在具體的項(xiàng)目中可以多多積累，控件庫(kù)就像一個(gè)工具箱，你只需要做成母板進(jìn)行拖拽就行了，而且能夠做到高效，統(tǒng)一，規(guī)范。

3.3 掌握頁(yè)面交互范式，快速選取組件

頁(yè)面是用來(lái)展示文本、圖片、視頻、超鏈接等信息組合的單元。我們看過(guò)各種各樣的界面，但通過(guò)內(nèi)容性質(zhì)、導(dǎo)航組織方式、頁(yè)面狀態(tài)3個(gè)維度可以很好的進(jìn)行分類，而不同性質(zhì)的頁(yè)面通常有一些常用的范式，我們可以根據(jù)頁(yè)面類型來(lái)選取合適的控件。

3.3.1 按內(nèi)容性質(zhì)分類

通過(guò)對(duì)產(chǎn)品特征、用戶對(duì)內(nèi)容的認(rèn)知、用戶目標(biāo)等方面的綜合考慮，可以用篩選效率、閱讀體驗(yàn)、操作便利的側(cè)重點(diǎn)來(lái)進(jìn)行頁(yè)面內(nèi)容的組織。

3.3.1.1 強(qiáng)調(diào)篩選效率

主要有列表式和宮格式。父級(jí)頁(yè)面是縮略內(nèi)容或選項(xiàng)，用于快速瀏覽和篩選；子級(jí)頁(yè)面則是相應(yīng)的詳細(xì)展開(kāi)內(nèi)容。

列表式可以承載較多文字和狀態(tài)的描述和變化。通常用于設(shè)置、個(gè)人中心、消息列表等。

宮格式通常占據(jù)屏幕的較大面積，圖形化比列表更強(qiáng)。

3.3.1.2 強(qiáng)調(diào)閱讀體驗(yàn)

主要有卡片式和沉浸式。父級(jí)頁(yè)面已經(jīng)具備較豐富的內(nèi)容，甚至可以不用進(jìn)入子級(jí)頁(yè)面，視覺(jué)沖擊力較強(qiáng)；子級(jí)頁(yè)面則是相應(yīng)的詳細(xì)展開(kāi)內(nèi)容。

卡片式，樣式豐富、承載量大，通常伴隨大圖。常用于電商、雜志、攝影等產(chǎn)品。

沉浸式，內(nèi)容單元全屏化，排除視覺(jué)干擾，實(shí)現(xiàn)沉浸式閱讀。常用于書(shū)籍閱讀、短視頻、音樂(lè)等產(chǎn)品。

3.3.1.3 強(qiáng)調(diào)操作便利

通常不存在上下級(jí)跳轉(zhuǎn)，在當(dāng)前頁(yè)面即可完成任務(wù)，所見(jiàn)即所得。一般出現(xiàn)在拍照、錄音、音樂(lè)制作等功能模塊。

3.3.1.4 另外還有一些混合類頁(yè)面，如卡片和列表的組合、宮格和卡片的組合等等。

3.3.2 按導(dǎo)航組織方式分類

導(dǎo)航設(shè)計(jì)是將產(chǎn)品的核心點(diǎn)（業(yè)務(wù)層）集中突出，盡可能做到任務(wù)路徑的扁平化和用戶操作便捷性，將用戶最常用行為（用戶層）分類組織，讓這些功能元素被用戶以最容易的方式獲取和使用，在移動(dòng)界面設(shè)計(jì)中，是非常重要的模塊，甚至可以說(shuō)：一個(gè)移動(dòng)端界面設(shè)計(jì)就是不同類型的導(dǎo)航設(shè)計(jì)以不同方式的合理組裝。

按照操作方式，我們可以將導(dǎo)航設(shè)計(jì)大致分為三種不同的類型：固定型、瞬時(shí)型、混合型。

3.3.2.1 固定導(dǎo)航

只需打開(kāi)應(yīng)用，就直截了當(dāng)?shù)恼故緦?dǎo)航中的各個(gè)選項(xiàng)。換言之，無(wú)需操作，就可以看到并通過(guò)各個(gè)功能入口。通常固定在頁(yè)面中，占據(jù)頁(yè)面的一定的面積。其中常用包括：桌面式、標(biāo)簽式、列表式：

宮格式/跳板式，通常占據(jù)屏幕的較大面積，圖形化比列表更強(qiáng)。

標(biāo)簽式/選項(xiàng)卡式，iOS 和 Android端常用的導(dǎo)航模式，有標(biāo)準(zhǔn)式、滾動(dòng)式、擴(kuò)展式，根據(jù)標(biāo)簽的數(shù)量做展示。

列表式，可以承載較多文字和狀態(tài)的描述和變化。通常用于設(shè)置、個(gè)人中心、消息列表等。

3.3.2.2 瞬時(shí)導(dǎo)航

點(diǎn)擊一個(gè)入口（icon/標(biāo)題/箭頭）或手勢(shì)操作，才會(huì)展示各個(gè)菜單選項(xiàng)，入口相對(duì)占頁(yè)面面積非常小，用戶需要的時(shí)候調(diào)出，算是打破屏幕邊界和運(yùn)用頁(yè)面視覺(jué)層級(jí)的高明手法。其中常用包括：抽屜式、菜單式、點(diǎn)聚式。

抽屜式，點(diǎn)擊左上角的圖標(biāo)，從左向右劃出抽屜，一般用于個(gè)人中心或者設(shè)置入口。

菜單式，點(diǎn)擊右上角的圖標(biāo)，彈出下拉菜單，一般用于常用的快捷操作或入口。

點(diǎn)聚式，點(diǎn)擊一個(gè)入口，圍繞其散開(kāi)，并展示出其中的功能入口。不過(guò)這種方式比較有局限，擴(kuò)展性不好，因此近一兩年都不怎么用這種形式了。比如釘釘6.0.15就已經(jīng)摒棄了下圖中的方式了。

3.3.2.3 混合導(dǎo)航

擁有直接展示功能入口并結(jié)合需要操作才展示的其他剩余功能。換言之，全局導(dǎo)航與瞬時(shí)導(dǎo)航的結(jié)合，其中常用包括：舵式、輪播式等。

舵式，通常是底部標(biāo)簽式導(dǎo)航和點(diǎn)聚式導(dǎo)航的組合。

輪播式，通常是宮格式導(dǎo)航和輪播導(dǎo)航的組合。

3.3.3 按頁(yè)面狀態(tài)分類

頁(yè)面狀態(tài)可以分為加載中、加載成功（有內(nèi)容和無(wú)內(nèi)容）、加載失敗。上述各類頁(yè)面均可能遇到這幾類狀態(tài)。下面以“知乎APP”為例。

四、提升設(shè)計(jì)質(zhì)量的3種方式

4.1 Z軸的運(yùn)用

我們知道手機(jī)界面是一個(gè)平面二維的空間，而 Material Design 通過(guò)二維的一些表達(dá)手段，比如投影、動(dòng)效等構(gòu)建出了Z軸（前后）的概念。

APP中不同的Z軸高度：

4.2 掌握基本的設(shè)計(jì)原則

“相信一切事物背后必有知識(shí)和道理”這幾乎是一個(gè)普世價(jià)值觀，但是常常被人們所忽略。產(chǎn)品設(shè)計(jì)也是同樣的道理，我們的每一個(gè)交互和功能的設(shè)計(jì)都應(yīng)該盡可能按照某個(gè)原則或規(guī)范，而不是隨心所欲，想怎么做就怎么做，太自我的東西，距離產(chǎn)品越遠(yuǎn)，距離藝術(shù)越遠(yuǎn)。

舉例：神奇數(shù)字 7±2 法則

PC端導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過(guò)5個(gè)。

4.3 頁(yè)面目標(biāo)影響頁(yè)面布局

交互設(shè)計(jì)的前提是要滿足業(yè)務(wù)目標(biāo)和用戶目標(biāo)，否則就是無(wú)意義的設(shè)計(jì)。目標(biāo)會(huì)隨著時(shí)間的推移和市場(chǎng)的變化而變化，因此設(shè)計(jì)也是跟隨變化的。

下面以淘寶首頁(yè)為案例，2020版本VS2021版本：

4.3.1 改動(dòng)了什么

1.商品分類隱藏，放入業(yè)務(wù)入口中。

2.去除橫版banner，banner下移變成豎版。

4.3.2 為什么要改動(dòng)

從消費(fèi)者的購(gòu)物決策來(lái)看，隨著消費(fèi)習(xí)慣變化，無(wú)目標(biāo)的購(gòu)物越來(lái)越多，消費(fèi)者在“逛街”中產(chǎn)生購(gòu)物需求。購(gòu)物決策從搜索式購(gòu)物到發(fā)現(xiàn)式購(gòu)物，新版首頁(yè)就是重點(diǎn)突出發(fā)現(xiàn)式購(gòu)物。

搜索式購(gòu)物模式下，平臺(tái)以商品、品牌為中心，聚合商品，消費(fèi)者來(lái)平臺(tái)找商品。比如商品分類，包含女裝、男裝等分類，本質(zhì)是一種搜索式購(gòu)物。

而發(fā)現(xiàn)式購(gòu)物模式下，平臺(tái)更加主動(dòng)推薦商品，以“人”為中心，不斷強(qiáng)化個(gè)性化，給消費(fèi)者帶來(lái)了更沉浸式的購(gòu)物體驗(yàn)，實(shí)現(xiàn)了從“人找貨”到“貨找人”。比如橫版banner，是核心的廣告收入來(lái)源，也占據(jù)首屏近四分之一的位置，但點(diǎn)擊、轉(zhuǎn)化效果較差。因而優(yōu)化為豎版banner，一方面可以兼容短視頻、直播等更多內(nèi)容形態(tài)，另一方面交互上符合下滑逛淘寶的習(xí)慣。

五、總結(jié)

每一個(gè)交互設(shè)計(jì)師都應(yīng)該有一套自己的設(shè)計(jì)方法論，小到可復(fù)用的產(chǎn)品原件庫(kù)，大到能輸出的設(shè)計(jì)思維和設(shè)計(jì)價(jià)值觀。這套方法論就是你的底層，它應(yīng)該是一個(gè)反脆弱系統(tǒng)，不斷的認(rèn)知迭代，優(yōu)化強(qiáng)勁。

一個(gè)人的能力很重要一部分體現(xiàn)在，是否把自己的能力和優(yōu)秀量化輸出，對(duì)于個(gè)人來(lái)說(shuō)，最簡(jiǎn)單的生意莫過(guò)于批量化販賣自己的某項(xiàng)能力，而批量化的前提是首先是，標(biāo)準(zhǔn)和規(guī)范。

最后，忠于用戶，忠于產(chǎn)品，忠于正確的事情，與君共勉。

本文的上半部分內(nèi)容《交互基礎(chǔ)篇（二）：超級(jí)干貨！高效輸出規(guī)范的交互文檔（上篇）》

文中觀點(diǎn)有什么不合適的地方歡迎大家指正交流~~

本文由 @Rinoa?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議