良好的設(shè)計(jì)，可視性和易用性。所謂能見度就是讓用戶知道如何使用這個(gè)產(chǎn)品，如何操作是合理的。所謂易于使用就是讓用戶了解您的設(shè)計(jì)意圖，并清楚地告訴用戶您為此目的設(shè)計(jì)的是什么。 ——唐納德·諾曼，《設(shè)計(jì)心理學(xué)》

為什么交互式設(shè)計(jì)師想要視覺化？是不是只畫一幅黑白手稿，所有這些都是畫框線條，并寫下一個(gè)標(biāo)簽來完成工作，其余的美化留給視覺設(shè)計(jì)師來做呢？

如果您真的這么認(rèn)為，您可能無法理解交互設(shè)計(jì)師的職業(yè)生涯的重要性，并忽略了交互式手稿中可以傳達(dá)的大量信息。

作為從概念到實(shí)現(xiàn)的產(chǎn)品的第一個(gè)原型，交互式草案負(fù)責(zé)產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)的基礎(chǔ)設(shè)計(jì)概念。設(shè)計(jì)過程需要凝聚交互設(shè)計(jì)師的廣泛思考和努力工作，而不是那么容易。能做得好。

定義交互式手稿的過程

定義形式元素，姿勢(shì)和輸入方法;

定義功能和數(shù)據(jù)元素;

確定功能組和級(jí)別;

繪制交互框架;

構(gòu)建關(guān)鍵線場(chǎng)景腳本;

使用驗(yàn)證方案檢查設(shè)計(jì)。

回顧上面的過程，1~5必須使用一定的視覺思維，這實(shí)際上不是一個(gè)純粹的邏輯事物。作為一名出色的交互設(shè)計(jì)師，他的交互式草稿不僅清晰明了，而且讓人們一目了然地看到每個(gè)界面的視覺焦點(diǎn)和信息層次。同時(shí)，它還標(biāo)記了用戶使用的過程步驟和過渡動(dòng)畫模式。直接把整個(gè)產(chǎn)品的完整形式擺在你面前，一切都很清晰。

視覺思維也是交互設(shè)計(jì)師的靈魂技能，但重點(diǎn)不同。但是視覺思維中涉及的概念和方法太多了。當(dāng)我構(gòu)思這篇文章時(shí)，我花了兩個(gè)多小時(shí)思考這個(gè)大綱并使用所有交互設(shè)計(jì)師都會(huì)使用的愿景。這個(gè)想法最終被整合到三個(gè)角色中，并且相對(duì)容易理解。

視覺思維的三個(gè)角色

架構(gòu)師：他在這里給出了界面藍(lán)圖中每個(gè)模塊的原因;

講述者：他讓用戶看到界面，自然知道如何使用它;

漫畫家：他會(huì)和你說話，給你反饋，講故事。

I.繪制藍(lán)圖的建筑師

1.場(chǎng)景

在開始設(shè)計(jì)界面之前，請(qǐng)考慮以下問題：

這個(gè)界面（Web，移動(dòng)設(shè)備，電視）有什么設(shè)備，它的分辨率是什么，適當(dāng)?shù)淖煮w大小和最小點(diǎn)擊面積是什么？

在什么情況下用戶使用這個(gè)界面，坐在電腦前，在路上行走，躺在沙發(fā)上或開車？

什么是用戶的基本輸入法，是鼠標(biāo)或鍵盤或觸摸屏，還是電視遙控器？

用戶如何進(jìn)入此界面，其上下文界面是什么？

如果您沒有考慮上述四個(gè)問題并開始設(shè)計(jì)，您可能會(huì)犯一些基本錯(cuò)誤：例如，具有高分辨率屏幕的手機(jī)設(shè)計(jì)為小而不可見，或者可以訪問用鼠標(biāo)。汽車的中控臺(tái)接口，這是為了讓人心疼嗎？

交互設(shè)計(jì)人員還應(yīng)該考慮該方案，以便不設(shè)計(jì)看起來合理但不能使用的產(chǎn)品。

2.塊

設(shè)計(jì)側(cè)重于最佳傳達(dá)某些信息的方式。 —— Kevin· Milai，Darrell·佐野，《設(shè)計(jì)視覺界面》

界面設(shè)計(jì)是一種處理信息的工作。您要向用戶顯示的所有功能實(shí)際上都是信息的組合。這種組合的最小單位稱為塊。

以我們常用的微信主頁為例。以下是我們最近與之聊過的對(duì)話列表和群聊。如何形成每個(gè)會(huì)話塊？

似乎簡(jiǎn)單的會(huì)話塊實(shí)際上包含很多信息。例如，如果您看到聯(lián)系人圖片，則可以快速識(shí)別每個(gè)聯(lián)系人。例如，您需要查看與她最近的聊天記錄，并且您需要知道她是什么時(shí)候發(fā)送——不好，現(xiàn)在是五點(diǎn)鐘，我沒有回到我妻子的新聞，我已經(jīng)死了！

當(dāng)您花一些時(shí)間考慮組合這些元素時(shí)，就會(huì)完成一個(gè)簡(jiǎn)單的塊。

這時(shí)，下一個(gè)問題即將到來。如果是群聊會(huì)話怎么辦？

你需要做一些改變：

群聊是與多人交談，因此頭像不是特定的人。是不是可以繪制代表群聊的圖標(biāo)？不是這樣，所以每組聊天都是一樣的，沒有認(rèn)可。您可以組合構(gòu)成群聊的頭像，這樣您至少可以識(shí)別主要成員;

小組聊天有時(shí)會(huì)被阻止，這會(huì)減少騷擾，但是有未讀消息并希望被標(biāo)記，因此您可以將號(hào)碼更改為小紅點(diǎn);

由于郵件被阻止，您必須有一個(gè)提示，加上一個(gè)圖標(biāo);

最近的聊天記錄應(yīng)添加到聯(lián)系人姓名中，否則我不知道是誰在群聊中發(fā)送的。

好的，只做了幾個(gè)簡(jiǎn)單的步驟。這個(gè)塊已成為另一個(gè)功能，但它保持原始格式，非常高興。

它看起來不像建筑計(jì)劃中的房間嗎？

每個(gè)塊都有自己的信息內(nèi)容，并且還有自己的功能要完成，以及許多形式的派生和狀態(tài)變化，這些都是交互設(shè)計(jì)者需要事先考慮的事情。

3.布局

因?yàn)樗且幻ㄖ煟?dāng)然，你不能只設(shè)計(jì)一堆房間。他還需要根據(jù)整個(gè)建筑的面積和形狀來安排這些房間的布局。這種布局的原理是什么？

我推薦由知名設(shè)計(jì)師羅賓威廉姆斯撰寫的《寫給大家看的設(shè)計(jì)書》，它易于理解和強(qiáng)大。

設(shè)計(jì)的四個(gè)基本原則

對(duì)比：如果元素（字體，顏色，大小，形狀，線寬，空間等）不同，只需讓它們完全不同即可。

重復(fù)：在整個(gè)產(chǎn)品中重復(fù)設(shè)計(jì)的視覺元素，這增加了組織和一致性并降低了認(rèn)知成本。

對(duì)齊：每個(gè)元素應(yīng)該與頁面上的另一個(gè)元素有一些可視連接，并且任何東西都不能隨意放在頁面上。

鄰近度：彼此相關(guān)的項(xiàng)目應(yīng)該靠近并組合在一起形成塊或塊組，從而減少混亂并提供清晰的結(jié)構(gòu)。

這些原則實(shí)際上是相互關(guān)聯(lián)的。他們很少只使用一個(gè)原則。它們不僅用于布局階段。實(shí)際上，在設(shè)計(jì)每個(gè)塊時(shí)，您已經(jīng)開始使用每個(gè)塊。它整潔而對(duì)比鮮明。功能塊絕對(duì)可以為您的設(shè)計(jì)增添許多功能。

我畫了一個(gè)微信主頁的布局，內(nèi)容沒有細(xì)化。您可以清楚地看到上述四種設(shè)計(jì)原則的應(yīng)用，并且塊已正確放置。

水平和眨眼測(cè)試

在布局階段，最重要的是確保頁面元素在美學(xué)上令人愉悅并且易于閱讀。另外需要注意的是元素之間的層次結(jié)構(gòu)是否合適。在微信主頁的例子中，主頁最重要的元素是什么？

頁面標(biāo)題

未讀消息數(shù)

未讀對(duì)話

設(shè)計(jì)師有一種檢查水平的常用方法，稱為“斜視測(cè)試”— —閉上一只眼睛，用另一只眼睛看屏幕，看哪些元素突出，哪些元素模糊。哪些元素似乎被分組（親密度和塊）。只需更改問題的視角，您就能夠發(fā)現(xiàn)當(dāng)您沉迷于細(xì)節(jié)時(shí)之前發(fā)現(xiàn)的布局和構(gòu)圖問題。

4.法律

設(shè)計(jì)中有一些約定，例如黃金分割方法，網(wǎng)格系統(tǒng)，系統(tǒng)規(guī)范等。遵循這些前輩總結(jié)的規(guī)則可以使您獲得兩倍的結(jié)果，只需一半的努力，并設(shè)計(jì)一個(gè)更漂亮的界面。同時(shí)，您還可以使用“重復(fù)性”創(chuàng)建自己的規(guī)則，這也可以提高效率并降低用戶的認(rèn)知成本。

網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)將屏幕劃分為大的水平和垂直區(qū)域。它是一個(gè)很好的工具，可以幫助您在布局中實(shí)現(xiàn)對(duì)齊和親密。它在Web和APP設(shè)計(jì)中具有廣泛的應(yīng)用。設(shè)計(jì)人員可以定期將界面元素布局到網(wǎng)格結(jié)構(gòu)中，適當(dāng)?shù)貜?qiáng)調(diào)高級(jí)元素和結(jié)構(gòu)，并為低級(jí)元素或次級(jí)重要塊留下適當(dāng)?shù)目臻g。

系統(tǒng)規(guī)范

系統(tǒng)規(guī)范非常煩人。我喜歡如何設(shè)計(jì)和如何設(shè)計(jì)它。你為什么要我約定我？因此，在移動(dòng)互聯(lián)網(wǎng)的早期，您確實(shí)可以看到許多不是根據(jù)系統(tǒng)規(guī)格設(shè)計(jì)的APP。自由是非常自由的。但是大多數(shù)都非常難以使用，更不用說每個(gè)應(yīng)用程序都是自包含的并且使用不同的交互方式，讓人們真的感到瘋狂。

隨后，人們?cè)絹碓蕉嗟匕l(fā)現(xiàn)系統(tǒng)規(guī)范的好處：您可以從大型互聯(lián)網(wǎng)公司（如Google，Apple和Microsoft）的設(shè)計(jì)團(tuán)隊(duì)中學(xué)習(xí)很多設(shè)計(jì)原則，這可以節(jié)省大量的控制設(shè)計(jì)成本，改進(jìn)設(shè)計(jì)和開發(fā)效率，如果每個(gè)人都使用相同的設(shè)計(jì)規(guī)范，那么用戶的認(rèn)知和使用成本無疑會(huì)大大降低，為什么不呢？

通用系統(tǒng)規(guī)范

iOS Do’ s&Donquo??; ts：https://developer.apple.com/design/tips/

Apple的人機(jī)交互指南：https://developer.apple.com/design/

Google Design：https://design.google

微軟的UWP設(shè)計(jì)規(guī)范：https://developer.microsoft.com/en-us/windows/apps/design

在介紹了建筑師之后，我將繼續(xù)介紹其他兩位，評(píng)論員和漫畫家。

下面，我想用一個(gè)實(shí)際的產(chǎn)品案例來討論我和視覺設(shè)計(jì)師Nefish如何使用這兩個(gè)角色概念來完成Rocket的2.0版本。

小火箭是騰訊計(jì)算機(jī)管家在用戶桌面上的加速小工具。它可以快速幫助用戶清理計(jì)算機(jī)內(nèi)存并加快計(jì)算機(jī)速度。它受到用戶的廣泛贊譽(yù)。修訂前的每日使用次數(shù)已超過1億次，成為電腦管家和用戶。重要的連接接觸。

現(xiàn)在我們必須重新設(shè)計(jì)這個(gè)十億級(jí)別的產(chǎn)品，如何找到優(yōu)化點(diǎn)？

其次，教你評(píng)論員

評(píng)論員指的是解釋體育比賽和比賽的專業(yè)人士。他們可以運(yùn)用專業(yè)知識(shí)和觀點(diǎn)來解讀比賽場(chǎng)地的情況，介紹雙方的背景，營(yíng)造比賽的氛圍，引導(dǎo)觀眾更好地了解比賽。并觀看比賽。

誰是產(chǎn)品使用的評(píng)論員？它是產(chǎn)品手冊(cè)嗎？這是一個(gè)新手指南嗎？它們當(dāng)然有一些效果，但最大的是直接設(shè)計(jì)產(chǎn)品的設(shè)計(jì)師。

他們可以仔細(xì)安排界面的呈現(xiàn)方式，讓用戶更好地了解產(chǎn)品，甚至愛上它。

1.注意

為了讓用戶更好地了解產(chǎn)品，設(shè)計(jì)師要注意的最重要的事情就是在使用過程中管理用戶的注意力。

有兩種常用的管理注意力的工具：

基本對(duì)比：尺寸，形狀，顏色，位置等都不同。

動(dòng)作比較：運(yùn)動(dòng)和靜止，運(yùn)動(dòng)方向和運(yùn)動(dòng)時(shí)差。

有了這兩個(gè)工具，我們就可以有目的地引導(dǎo)用戶的注意力，并進(jìn)一步引導(dǎo)他的視線。

用戶點(diǎn)擊加速后，舊版小火箭將打開右側(cè)的“小尾巴”，通知用戶加速的結(jié)果。

這是一種從左到右的視線運(yùn)動(dòng)，符合人們的正常閱讀習(xí)慣，似乎沒有問題。

但這是真的嗎？

當(dāng)你想到它時(shí)，“小尾巴”似乎有點(diǎn)太長(zhǎng)了。它使用“加速成功！燃燒83MB內(nèi)存”和“發(fā)現(xiàn)x無用剩余過程”的全句來描述加速結(jié)果。顯示時(shí)間小于2秒，視線的移動(dòng)路徑太長(zhǎng)，閱讀和理解所花費(fèi)的時(shí)間更長(zhǎng)。

因此，我們?nèi)娣治隽藥讉€(gè)小型火箭的結(jié)果頁面，重新定義了用戶的視線移動(dòng)路徑：

從上圖可以看出，前三種程序大大縮短了用戶的視線運(yùn)動(dòng)，結(jié)合動(dòng)畫的顯示，用戶的閱讀效率大大提高。

第四種方案是為操作消息而設(shè)計(jì)的。此類消息會(huì)顯示較長(zhǎng)時(shí)間。希望用戶可以完全閱讀所有文本并強(qiáng)調(diào)點(diǎn)擊率。因此，我們?cè)诖_保信息顯示的前提下控制每個(gè)元素的出現(xiàn)時(shí)間差。和視覺層次結(jié)構(gòu)，暗示和引導(dǎo)用戶使用“Z形”路線閱讀。

下圖是第四種方案的視覺效果。至于如何呈現(xiàn)先前的方案，我將在下面的“能量”中解釋它。

2.顯示能量

心理學(xué)家James·首先提出了一筆費(fèi)用; James&J。Gibson，后來由Donald Normid博士在唐納德·諾曼博士作為重要設(shè)計(jì)《設(shè)計(jì)心理學(xué)》中引入思想，它指的是物體所呈現(xiàn)的屬性可以讓你自然地理解它的功能，比如一個(gè)扁平的椅子，你自然知道你可以坐。

在實(shí)際的設(shè)計(jì)場(chǎng)景中，我認(rèn)為這個(gè)理論可以改進(jìn)，具有更實(shí)際的指導(dǎo)意義。我稱之為——直觀的設(shè)計(jì)。

我們必須認(rèn)識(shí)到一件事，有兩種不同的思維方式：

通過觀察，閱讀和理解，我們可以理解按鈕上的文字和屏幕上的數(shù)字，并使用“理性大腦”來思考鏈接，從而可以對(duì)信息進(jìn)行排序和觸摸。

在潛意識(shí)的路徑中，我們通過諸如視覺，聽覺，觸覺等感官來感知物體的屬性，例如可旋轉(zhuǎn)的圓形旋鈕，綠燈開關(guān)和燃?xì)庠罨鹧娴拇笮?，以及潛意識(shí)的鏈接是打開了“感覺大腦”的感覺。讓信息通過“直覺”到達(dá)心靈。

這兩條路徑的好壞，每個(gè)都有自己的使用場(chǎng)景，但有時(shí)候一些簡(jiǎn)單的信息傳遞，我們更適合通過“潛意識(shí)路徑”進(jìn)行優(yōu)化。

最初的加速結(jié)果是用如此長(zhǎng)的“加速成功！燃燒83MB內(nèi)存”來表達(dá)信息，但這里的信息冗余太高了。事實(shí)上，每次看到它時(shí)，只有“83MB”數(shù)字才是最有意義的。那么為什么不以圖形方式顯示其他不必要的讀數(shù)？

因此，我們想到找出“燃燒”這個(gè)詞并將其變成火焰，在下面寫下燒毀的記憶值，以便用戶通過管理注意力和表現(xiàn)的表現(xiàn)來感知這些信息。速度大大加快。

同樣，我們也說“太棒了！計(jì)算機(jī)已經(jīng)是最快的了”。這種提示沒有記憶優(yōu)化的文案改變成閃亮的獎(jiǎng)杯，隨機(jī)掉落的宇航員和其他有趣的隨機(jī)獎(jiǎng)勵(lì)，讓用戶感覺使用小火箭加速是非常有趣的。

最終結(jié)果如上所示。我們還驗(yàn)證了用戶對(duì)此更改后的結(jié)果頁面的理解，充分了解人們達(dá)到了93％，表明這種大膽的變化確實(shí)可以接受。

基于這種設(shè)計(jì)理念，當(dāng)計(jì)算機(jī)內(nèi)存使用率過高時(shí)，我們還為小型火箭增加了一種高風(fēng)險(xiǎn)的提醒狀態(tài)。它不僅僅是充滿了紅色，而是增添了閃電和溢出的感覺，讓用戶一眼就能找到它。理解它，真的想指點(diǎn)……

3.關(guān)系

人類視覺是整體的，我們的視覺系統(tǒng)自動(dòng)構(gòu)建視覺輸入結(jié)構(gòu)，感知神經(jīng)系統(tǒng)層面的形狀，形狀和物體，而不僅僅是看到?jīng)]有連接的邊緣，線條和區(qū)域，形狀和圖形。在德語中，它是格式塔，因此這些理論被稱為格式塔原則的視覺感知。 ——杰夫約翰遜，《認(rèn)知與設(shè)計(jì)：理解UI設(shè)計(jì)準(zhǔn)則》

談到設(shè)計(jì)中的關(guān)系，我不得不提到著名的“格式塔原則”。我相信每個(gè)人都已經(jīng)熟悉它了。我只列出三個(gè)最相關(guān)的。

格式塔原則

鄰近原則：元素之間的相對(duì)距離影響我們?nèi)绾慰创鼈兪欠褚约叭绾卧谝黄?，通常用于分組元素;

相似性原則：明顯具有共同特征（如形狀，大小，顏色等）的事物將與我們的愿景相結(jié)合，即類似的部分將在感知中形成若干群體;

共同命運(yùn)：一起移動(dòng)的對(duì)象被視為屬于一個(gè)組或彼此相關(guān)。

當(dāng)我們?cè)O(shè)計(jì)小火箭時(shí)，我們有意識(shí)地使用了這個(gè)原理，因?yàn)橛脩酎c(diǎn)擊了小火箭控制器，它真的會(huì)飛出火箭。你如何看待這兩者是一個(gè)整體？

如上所示，當(dāng)鼠標(biāo)移過該控件時(shí)，首先會(huì)出現(xiàn)“迷你火箭”，開始旋轉(zhuǎn)并飛行。它與我們的官方火箭（相似性）非常相似，讓你對(duì)潛在的行為有潛意識(shí)。心理預(yù)見。

點(diǎn)擊后，迷你火箭迅速飛起，官方火箭從底部向上飛出。該位置的一致性（接近度）和一致行動(dòng)（共同命運(yùn)）讓您立即知道兩枚火箭實(shí)際上是一組。新火箭也將與桌面控件形成一個(gè)整體。

第三，將講述故事的漫畫家

1.對(duì)話

軟件產(chǎn)品如何與用戶交流？你能用單詞語言嗎？

在設(shè)計(jì)師手中，有很多方式可以與用戶交流。最基本的是——操作反饋。

將鼠標(biāo)懸停在它上面后，這個(gè)反饋可以是一個(gè)小的懸停動(dòng)畫，也可以是點(diǎn)擊后飛出的小火箭或超出預(yù)期的效果：

和平時(shí)期有任何節(jié)日或大型活動(dòng)。我們會(huì)給你的小火箭一個(gè)假日皮膚，但在一些特殊的日子（比如你的生日），為什么我們不能給你一點(diǎn)驚喜呢？

這是小火箭的“Sound Blast Egg”的初衷，它也是與用戶的熱烈對(duì)話。

2.分割鏡子

漫畫家會(huì)精心設(shè)計(jì)每一頁的構(gòu)圖，這樣即使你正在看紙質(zhì)漫畫，你也可以通過“腦力補(bǔ)充”形成一系列真實(shí)的動(dòng)態(tài)畫面，這樣你就可以屏住呼吸并深深吸引劇情。

互動(dòng)設(shè)計(jì)專業(yè)的有趣方面也在這里。雖然我們不是漫畫，但我們需要在用戶操作后設(shè)計(jì)由軟件觸發(fā)的每個(gè)動(dòng)作，并將其分解為每個(gè)步驟。

△小型火箭托盤形式的部分交互式草案

您對(duì)它的思考越多，您就越深入，您就越能理解用戶的使用場(chǎng)景，您就可以越多地設(shè)計(jì)出讓用戶感到體貼，自然和有趣的產(chǎn)品。

因此，我建議交互設(shè)計(jì)師應(yīng)該學(xué)習(xí)一些關(guān)于漫畫和動(dòng)畫設(shè)計(jì)的知識(shí)。交互式動(dòng)畫不僅僅是視覺設(shè)計(jì)師的作品。它應(yīng)該由交互設(shè)計(jì)師提前定義，然后與視覺同學(xué)討論。修改并共同努力，在您的腦海中創(chuàng)造出最完美的設(shè)計(jì)。

3.故事

漫畫有對(duì)話，鏡子，當(dāng)然還有好故事。

我們的小型火箭可以通過一次點(diǎn)擊加速計(jì)算機(jī)。你可以通過長(zhǎng)按激活更強(qiáng)大的火箭來完成更強(qiáng)的加速度嗎？

通過這種靈感來源，我們創(chuàng)造了一個(gè)“穿越蟲洞”的故事。

在用戶按下小火箭后，他可以觸發(fā)蟲洞。一旦手被釋放，就會(huì)有一枚火箭即將到來。最初，整個(gè)火箭的發(fā)射時(shí)間不到0.5秒。怎么會(huì)更快？我們想到在電影《駭客帝國(guó)》中使用“子彈時(shí)間”的概念，向后思考，讓火箭突然從非?？斓椒浅Ｂㄟ^強(qiáng)烈的對(duì)比，讓你感受到它的終極速度和力量。

當(dāng)這種火箭佩戴時(shí)，加速效果當(dāng)然是非凡的。 “當(dāng)當(dāng)”動(dòng)畫閃爍，并有通知—— “你已經(jīng)探索了一個(gè)新功能！”

這就像發(fā)現(xiàn)新世界的快樂。

以上是我們兩年前用視覺思維完成Little Rocket 2.0修訂的故事的一小部分。我保存了以前的分析和研究，拆解過程和其他情況，主要以此為例。談?wù)撘曈X思維。根據(jù)用戶的口口相傳和使用數(shù)據(jù)，此修訂版非常成功，我們受到鼓勵(lì)。

也許我們做得不夠好，但我們總是在通往更好的體驗(yàn)之路上。

感謝我的合作伙伴Nefish，他的創(chuàng)新理念和實(shí)施能力，使這次修訂能夠有如此精彩的視覺呈現(xiàn)。

« 哪些網(wǎng)站內(nèi)部因素會(huì)導(dǎo)致網(wǎng)站權(quán)利的K下降？ | 阿瑪尼繼續(xù)寫20年的美妝傳奇，與天貓超級(jí)品牌日合作重建理想生活 »