基礎(chǔ)知識(shí)！聊聊交互設(shè)計(jì)三要素之細(xì)節(jié)設(shè)計(jì)

@黃紅藝Designer ：交互設(shè)計(jì)三部曲終于寫到最后了，今天聊聊交互設(shè)計(jì)的最后一個(gè)要素 —— 交互細(xì)節(jié)設(shè)計(jì)。本要素是在前兩個(gè)要素指導(dǎo)下的設(shè)計(jì)實(shí)踐，也是交互設(shè)計(jì)可視化與形象化的關(guān)鍵。

往期回顧：《基礎(chǔ)知識(shí)！聊聊交互設(shè)計(jì)三要素之信息架構(gòu)和流程設(shè)計(jì)》

相對(duì)于前兩個(gè)要素的完整性和系統(tǒng)性，第三個(gè)要素-交互細(xì)節(jié)設(shè)計(jì)，就顯得瑣碎和零散。根據(jù)交互設(shè)計(jì)由淺入深的漸進(jìn)，交互細(xì)節(jié)可以分為布局、控件、適配、音效與動(dòng)效、流（目光與手指的循跡）等等。接下來，我們就從布局開始聊一聊交互細(xì)節(jié)設(shè)計(jì)。

首先是布局。頁面布局的首要目的就是為了頁面功能的秩序感，使其在頁面功能的分類以及輕重緩急的表現(xiàn)上更加合理，符合用戶的心智模型，在用戶使用的過程中，做到Don’t make me think !在交互細(xì)節(jié)設(shè)計(jì)中，頁面布局與前兩個(gè)要素之間的聯(lián)系最為緊密。布局的依據(jù)就是通過卡片分類法獲取的并通過流程設(shè)計(jì)優(yōu)化過的交互設(shè)計(jì)信息架構(gòu)。根據(jù)得到的信息架構(gòu)，我們就可以知道頁面導(dǎo)航應(yīng)該采用什么樣的導(dǎo)航方式，抽屜式導(dǎo)航還是標(biāo)簽式導(dǎo)航，以及每個(gè)頁面應(yīng)該有哪些相關(guān)元素需要體現(xiàn)和體現(xiàn)的程度。筆者在頁面布局中主要堅(jiān)持格式塔心理學(xué)的設(shè)計(jì)原則。

格式塔心理學(xué)派斷言：人們?cè)谟^看時(shí)眼腦共同作用，并不是在一開始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來，使之成為一個(gè)更易于理解的統(tǒng)一體。當(dāng)一個(gè)格式塔單元中包含了太多互不相關(guān)的單位，眼腦就會(huì)試圖將其簡(jiǎn)化，把各個(gè)單位加以組合，使之成為知覺上易于理解的整體。格式塔理論明確地提出：眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過程，正是通過這一過程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體。由此產(chǎn)生出了格式塔的一些基本原則(適用于布局和界面設(shè)計(jì))：主要包括接近原則、連續(xù)原則、相似原則和閉合原則。

有興趣的讀者可以了解相關(guān)的知識(shí)。

在交互設(shè)計(jì)的頁面布局中，要對(duì)不同的功能進(jìn)行分類，并將其在視覺體驗(yàn)上分開，這就會(huì)用到格式塔心理學(xué)中的接近原則。同理，頁面布局中，主要功能的凸顯、次要功能的弱化。總的要求就是重點(diǎn)突出，詳略得當(dāng)。

其次就是控件。說到控件，更多的是指移動(dòng)端應(yīng)用，Android和ios應(yīng)用。控件的作用有兩個(gè)：一、采用同一類型的控件可以使得應(yīng)用的風(fēng)格鮮明、有個(gè)性，賦予應(yīng)用一種獨(dú)特的氣質(zhì)；二、以不同平臺(tái)為基礎(chǔ)的控件，在開發(fā)的時(shí)候減少工作量，做到拿來就用。控件包括按鈕、開關(guān)、輸入框和進(jìn)度指示器?？丶€可以根據(jù)自己的需要來自己定義。有些應(yīng)用在開發(fā)的過程中，制作設(shè)計(jì)規(guī)范的同時(shí)，會(huì)制作相應(yīng)的控件，便于在后期的開發(fā)過程中減少工作量。

△ 界面控件距離（來源網(wǎng)絡(luò)）

其次，是不同終端之間的界面適配。包括不同分辨率手機(jī)之間的適配、移動(dòng)端和PC端的適配。適配有一個(gè)更專業(yè)的名稱叫響應(yīng)式設(shè)計(jì)（Responsive Design）。響應(yīng)式的設(shè)計(jì)分為三個(gè)等級(jí)，第一等級(jí)是最弱的適配，就是沒有適配，手機(jī)端會(huì)等比例縮小，需要放大才能查看，但是，不會(huì)出現(xiàn)圖片破損的狀況。第二個(gè)等級(jí)是輕度適配，可以實(shí)現(xiàn)移動(dòng)端的正常預(yù)覽，文字大小不變，圖片等比例縮小。第三等級(jí)是圖片、文字、元素位置以及顯示方式等等，都會(huì)隨著顯示屏幕的大小而適應(yīng)屏幕顯示，達(dá)到顯示效果的最優(yōu)化，提高用戶體驗(yàn)。

△ 響應(yīng)式設(shè)計(jì)（來源網(wǎng)絡(luò)）

響應(yīng)式設(shè)計(jì)，第一要考慮兼容設(shè)備的范圍以及相應(yīng)的分辨率。這樣就可以確定出幾套交互稿和效果圖。第二，根據(jù)不同的尺寸以及設(shè)計(jì)規(guī)范來設(shè)計(jì)交互原型。第三，對(duì)相應(yīng)的元素和模塊進(jìn)行調(diào)整。在響應(yīng)式設(shè)計(jì)中，有兩點(diǎn)需要特別注意：1）菜單，PC端的頁面足夠大，能夠?qū)⒉藛稳空归_來顯示，但是移動(dòng)端就要把菜單收起來或者以抽屜的形式放在左側(cè)；2）圖表，圖表是做所有的頁面中最難處理的。目前筆者還沒有找到通用的有效方法，多采用PC與移動(dòng)端不同的設(shè)計(jì)，PC上采用列表，移動(dòng)端采用內(nèi)容單元的形式，即將列表中的一個(gè)項(xiàng)目單獨(dú)成為一個(gè)內(nèi)容單元，以瀑布流的形式向下滾動(dòng)。但是這種方法就喪失了列表的一項(xiàng)重要功能，就是項(xiàng)目之間的對(duì)比。

再次，就是音效和動(dòng)效。智能手機(jī)滿足了人們視覺和觸覺，音效則實(shí)現(xiàn)了聽覺的交互。目前，音效設(shè)計(jì)的主要作用還是現(xiàn)在動(dòng)效設(shè)計(jì)師已經(jīng)單獨(dú)的獨(dú)立出來作為產(chǎn)品開發(fā)中的一環(huán)。在扁平化風(fēng)行天下的情況下，優(yōu)雅的動(dòng)效設(shè)計(jì)是更多應(yīng)用的追求。

目前，有很多動(dòng)效制作軟件各有優(yōu)劣點(diǎn)，筆者比較傾向于AE，因?yàn)锳E設(shè)計(jì)出來的效果細(xì)膩，細(xì)節(jié)豐富，你想要什么效果 AE都能實(shí)現(xiàn)，但是程序上能不能實(shí)現(xiàn)就難說啦。AE缺點(diǎn)就是不可交互+精準(zhǔn)度很難控制。正式因?yàn)樾Ч?xì)膩豐富，精準(zhǔn)度的控制才是考驗(yàn)動(dòng)效設(shè)計(jì)師水平的試金石。動(dòng)效學(xué)習(xí)中，可以參考Google Material Design設(shè)計(jì)規(guī)范中的動(dòng)效設(shè)計(jì)的詳細(xì)說明：

1. 《中文版來了！新版Material Design 官方動(dòng)效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動(dòng)效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動(dòng)效指南（三）》

另外，網(wǎng)上關(guān)于動(dòng)效的設(shè)計(jì)案例很多，多看、多練才能提高。在《移動(dòng)設(shè)計(jì)》作者總結(jié)了動(dòng)效設(shè)計(jì)的相關(guān)原則：

運(yùn)動(dòng)形變，萬變不離其宗（運(yùn)動(dòng)和形變之間的結(jié)合衍生）

節(jié)奏速度，掌控曲線時(shí)長(zhǎng)

情感故事，擬物、隱喻、品牌

結(jié)合操作，關(guān)聯(lián)輕量自然

點(diǎn)到即止，切記過猶不及

尊重習(xí)慣，謹(jǐn)慎進(jìn)行創(chuàng)新

快速原型，多方溝通權(quán)衡

最后，就是流。流，即目光和手指的循跡，是信息在設(shè)備與人之間的流轉(zhuǎn)，實(shí)現(xiàn)人與設(shè)備之間的觸發(fā)、影響和反饋交互。整個(gè)信息與反饋之間的流轉(zhuǎn)包括視線流和操作流。視線流的的形成是根據(jù)頁面布局以及頁面中的元素特點(diǎn)來流動(dòng)的，對(duì)比越強(qiáng)烈越容易引起人的注意。

△ 頁面布局視覺熱力圖（來源網(wǎng)絡(luò)）

說到這里我們不得不把百度和Google拉出來說一說。通過研究發(fā)現(xiàn)，用戶對(duì)于搜索的結(jié)果查看集中在前幾條，從上到下進(jìn)行閱讀。Goolge的搜索結(jié)果就是這樣布局的符合用戶的視覺流，當(dāng)用戶從上到下瀏覽完成以后自然而然就要翻頁到下一頁，所以底部是翻頁操作。百度的設(shè)計(jì)也符合這一規(guī)律，但是百度將用戶的視覺熱力圖的重點(diǎn)以競(jìng)價(jià)方式做了廣告，這也是百度競(jìng)價(jià)排名遭人詬病的原因。所以，大家用百度搜索都形成了習(xí)慣，直接跳過前幾條，從后面開始。

△ 搜索結(jié)果視覺熱力圖（來源網(wǎng)絡(luò)）

從操作焦點(diǎn)到視覺焦點(diǎn)的引導(dǎo)更多的是通過動(dòng)效設(shè)計(jì)來實(shí)現(xiàn)。在搜索的過程中，從搜索結(jié)果到翻頁就形成了視覺的引導(dǎo)流，當(dāng)點(diǎn)擊翻頁以后，頁面會(huì)顯示在頂部，引導(dǎo)用戶從頭開始閱讀，這就是從操作焦點(diǎn)到視覺焦點(diǎn)的反饋流。在界面設(shè)計(jì)過程中，要充分考慮視覺焦點(diǎn)到操作觸點(diǎn)的引導(dǎo)流，從操作觸點(diǎn)到視覺焦點(diǎn)的反饋流。

視覺流要符合用戶的視覺習(xí)慣，或者引導(dǎo)用戶去瀏覽產(chǎn)品想讓用戶瀏覽的內(nèi)容。操作流需要考慮在任務(wù)的背景下，系列操作的連貫與自然可以引導(dǎo)的手指毫不費(fèi)力地進(jìn)行點(diǎn)擊。另一方面要順應(yīng)用戶的手指點(diǎn)擊習(xí)慣，保證足夠的容錯(cuò)性，不要讓用戶用自然的操作卻達(dá)到了非預(yù)期的目標(biāo)。在我們操作一款應(yīng)用的時(shí)候，會(huì)因?yàn)榫W(wǎng)絡(luò)、內(nèi)存等原因，造成反應(yīng)不及時(shí)，用戶會(huì)產(chǎn)生多次點(diǎn)擊的情況，如果多次點(diǎn)擊的位置出現(xiàn)其他功能操作的button，就會(huì)出現(xiàn)誤操作，嚴(yán)重降低用戶體驗(yàn)。流又提供了從另一個(gè)角度來審視頁面布局的新視野、新方法。在以用戶體驗(yàn)為中心的設(shè)計(jì)風(fēng)潮中，這種方法會(huì)越來越受到重視。

另外，交互設(shè)計(jì)的細(xì)節(jié)還包括手勢(shì)設(shè)計(jì)等等。交互細(xì)節(jié)的設(shè)計(jì)很多、很繁瑣，無論你做的多細(xì)致都不為過。這都需要用時(shí)間、以及用心去積累。

△ 移動(dòng)端手勢(shì)舉例（來源網(wǎng)絡(luò)）

最后推薦大家看一下，傅小貞、胡甲超與鄭元攏編寫的《移動(dòng)設(shè)計(jì)》，里面有很多設(shè)計(jì)細(xì)節(jié)的闡述，很值得一讀。筆者從中獲得很大的收獲。

交互設(shè)計(jì)三要素終于寫完了，文章更多的是從宏觀的角度，來闡述交互設(shè)計(jì)的三要素。文章概述了筆者在設(shè)計(jì)過程中的一些設(shè)計(jì)方法與設(shè)計(jì)要點(diǎn)，并沒有對(duì)三要素給出具體的實(shí)施方法。后期，分要素單獨(dú)介紹筆者掌握的設(shè)計(jì)方法與技巧。希望和大家一起進(jìn)步！

「優(yōu)設(shè)八月份人氣最高的好文」

1. 一個(gè)常見問題：《為什么你的設(shè)計(jì)作品看上去不夠?qū)I(yè)？》
2. 自學(xué)的正確姿勢(shì)：《光臨摹可不行！平面設(shè)計(jì)師在空余時(shí)間應(yīng)該怎樣自學(xué)？》
3. 大家最喜歡的中文字體：《超實(shí)用！有哪些免費(fèi)的中文字體可以下載？》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com