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

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

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

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

定義交互式手稿的過程

定義形式元素，姿勢和輸入方法;

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

確定功能組和級別;

繪制交互框架;

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

使用驗證方案檢查設(shè)計。

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

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

視覺思維的三個角色

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

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

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

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

1.場景

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

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

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

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

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

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

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

2.塊

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

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

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

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

當(dāng)您花一些時間考慮組合這些元素時，就會完成一個簡單的塊。

這時，下一個問題即將到來。如果是群聊會話怎么辦？

你需要做一些改變：

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

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

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

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

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

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

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

3.布局

因為它是一名建筑師，當(dāng)然，你不能只設(shè)計一堆房間。他還需要根據(jù)整個建筑的面積和形狀來安排這些房間的布局。這種布局的原理是什么？

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

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

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

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

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

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

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

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

水平和眨眼測試

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

頁面標(biāo)題

未讀消息數(shù)

未讀對話

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

4.法律

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

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

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

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

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

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

通用系統(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è)計規(guī)范：https://developer.microsoft.com/en-us/windows/apps/design

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

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

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

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

其次，教你評論員

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

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

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

1.注意

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

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

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

動作比較：運動和靜止，運動方向和運動時差。

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

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

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

但這是真的嗎？

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

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

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

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

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

2.顯示能量

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

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

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

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

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

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

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

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

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

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

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

3.關(guān)系

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

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

格式塔原則

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

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

共同命運：一起移動的對象被視為屬于一個組或彼此相關(guān)。

當(dāng)我們設(shè)計小火箭時，我們有意識地使用了這個原理，因為用戶點擊了小火箭控制器，它真的會飛出火箭。你如何看待這兩者是一個整體？

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

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

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

1.對話

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

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

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

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

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

2.分割鏡子

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

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

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

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

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

3.故事

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

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

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

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

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

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

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

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

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

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