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

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

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

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

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

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

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

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

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

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

3.2 制作交互組件庫

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

3.2.1 配色元素

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

3.2.2 文字元素

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

3.2.3 其它控件元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3.2.1 固定導(dǎo)航

只需打開應(yīng)用，就直截了當(dāng)?shù)恼故緦?dǎo)航中的各個(gè)選項(xiàng)。換言之，無需操作，就可以看到并通過各個(gè)功能入口。通常固定在頁面中，占據(jù)頁面的一定的面積。其中常用包括：桌面式、標(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)題/箭頭）或手勢操作，才會(huì)展示各個(gè)菜單選項(xiàng)，入口相對占頁面面積非常小，用戶需要的時(shí)候調(diào)出，算是打破屏幕邊界和運(yùn)用頁面視覺層級的高明手法。其中常用包括：抽屜式、菜單式、點(diǎn)聚式。

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

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

點(diǎn)聚式，點(diǎn)擊一個(gè)入口，圍繞其散開，并展示出其中的功能入口。不過這種方式比較有局限，擴(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 按頁面狀態(tài)分類

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

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

4.1 Z軸的運(yùn)用

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

APP中不同的Z軸高度：

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

“相信一切事物背后必有知識和道理”這幾乎是一個(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)卡盡量不要超過9個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過5個(gè)。

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

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

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

4.3.1 改動(dòng)了什么

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

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

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

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

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

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

五、總結(jié)

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

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

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

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

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

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

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