我今天與大家分享的是網(wǎng)頁界面《瞬間之美》的設(shè)計(jì)如何讓用戶感到興奮？

這本書分為七個(gè)部分。第三部分到第三部分討論了用戶在進(jìn)入網(wǎng)站前30秒內(nèi)所做的事情;第四部分到第六部分討論用戶在深入網(wǎng)站時(shí)想要做什么;第七部分著重于用戶離開。該網(wǎng)站，無論是臨時(shí)出發(fā)還是永久離境。

　第一部分：指引用戶

　　一、如何給網(wǎng)站布局

這不是你去頁面布局，但內(nèi)容決定了布局。布局是內(nèi)容組織的必然結(jié)果。考慮到頁面的所有需求，頁面的布局自然會形成。將頁面的所有頁面都放入頁面，然后四處移動并進(jìn)行調(diào)整。

在連續(xù)調(diào)整過程中，需要支持以下幾點(diǎn)：

完全理解頁面的不同組件并區(qū)分主要和次要。

布局指導(dǎo)用戶的視線，以了解用戶在瀏覽網(wǎng)頁時(shí)的使用習(xí)慣。例如，當(dāng)用戶瀏覽網(wǎng)站時(shí)，它們用于自上而下，從左到右，左上角是第一個(gè)視線，右下角是最后一個(gè)著陸點(diǎn)，右上角和左下角是視覺盲點(diǎn)，所以你可以在設(shè)計(jì)時(shí)比較它們。重要內(nèi)容放在左上角和右下角。

用顏色來吸引注意力。關(guān)鍵部分的顏色應(yīng)該突出。例如，左上角的徽標(biāo)和右下角的按鈕是最重要的部分。要強(qiáng)調(diào)這兩個(gè)部分，您可以使用網(wǎng)站上的顏色。它沒有在其他地方使用，所以它形成了對比并突出了它。

　二、統(tǒng)一設(shè)計(jì)風(fēng)格

本書中提到的統(tǒng)一設(shè)計(jì)風(fēng)格只提到了一點(diǎn)，即使用符號統(tǒng)一設(shè)計(jì)風(fēng)格，顧名思義，符號可以是品牌標(biāo)識或網(wǎng)站的整體圖標(biāo)風(fēng)格。

在關(guān)于界面統(tǒng)一性的章節(jié)中，作者沒有多少介紹，只有三頁紙被接管，并且界面設(shè)計(jì)中一致性的重要性非常高。在這里我想用《交互設(shè)計(jì)精髓4》中的統(tǒng)一介紹和我對統(tǒng)一的理解，主要?dú)w納為以下兩點(diǎn)：

　1. 統(tǒng)一性的益處

統(tǒng)一意味著軟件產(chǎn)品的不同模塊具有相似的外觀，感覺和行為。

統(tǒng)一性提高了易用性和易學(xué)性，降低了用戶學(xué)習(xí)成本，并降低了客戶培訓(xùn)和技術(shù)支持的成本。

增加設(shè)計(jì)和代碼重用，減少開發(fā)時(shí)間和精力。

統(tǒng)一可以創(chuàng)造一個(gè)井井有條的感覺，讓用戶感到舒適。

為了給用戶提供統(tǒng)一和統(tǒng)一的印象，用戶更容易認(rèn)識到產(chǎn)品開發(fā)人員的專業(yè)性，從而增強(qiáng)用戶對產(chǎn)品的信任。

　2. 如何做到統(tǒng)一

建立關(guān)系：經(jīng)常一起使用的元素在空間上組織起來以減少鼠標(biāo)移動;具有相似功能的元素在視覺上被組織，即視覺元素和行為元素是一致的。

將視覺元素與網(wǎng)格系統(tǒng)對齊：這是設(shè)計(jì)師幫助用戶以有組織和系統(tǒng)的方式體驗(yàn)產(chǎn)品的重要方式。

一致的空間：如果屏幕上的兩個(gè)區(qū)域需要幾乎相同的空間，請將它們設(shè)置為完全相同;如果這兩個(gè)區(qū)域需要不同的大小，則明確區(qū)別，如果不完全一致，則增加差異，因?yàn)槲⒚畹牟町悤褂脩舾械讲环€(wěn)定。

一致的間距和定位：如果屏幕的標(biāo)題部分始終完全出現(xiàn)在同一位置，則用戶無需考慮或?yàn)g覽界面。一致的間距和定位可以幫助人們的內(nèi)部視覺處理機(jī)制，這可以大大提高屏幕的可讀性。性別。

重用元素：因此用戶只需要學(xué)習(xí)一次。

　三、如何設(shè)計(jì)導(dǎo)航

人們通常被引導(dǎo)的方式是粗略地看一下頁面，看看他們有什么選擇，并快速篩選出與他們無關(guān)的內(nèi)容。

在設(shè)計(jì)導(dǎo)航時(shí)，讓用戶感覺他是主人。使用動詞對象設(shè)計(jì)導(dǎo)航，例如“創(chuàng)建頁面”，這使用戶感覺他們正在指導(dǎo)軟件。他們是領(lǐng)導(dǎo)者，而不是領(lǐng)導(dǎo)者。

　四、創(chuàng)建鏈接

許多網(wǎng)站上都有各種鏈接。這些鏈接按時(shí)間，相關(guān)性，點(diǎn)擊率等順序排列。許多網(wǎng)站的排列方式很少，很少有細(xì)節(jié)。作者給出了一個(gè)例子：

△這是公司內(nèi)部網(wǎng)主頁上的新聞列表。目的是讓公司的員工按時(shí)間順序了解最新事件。

作者重新設(shè)計(jì)如下：

設(shè)計(jì)思維：這些鏈接中的最新事件通常是最重要的;如何讓用戶看到鏈接按時(shí)間順序排列;

使用的設(shè)計(jì)方法：讓環(huán)境提示成為指導(dǎo)線索，就像日本平臺將在火車即將進(jìn)入車站時(shí)播放獨(dú)特音樂一樣。這種獨(dú)特的音樂可以有效地吸引乘客的注意力，并準(zhǔn)備提前下車。作者試圖將環(huán)境線索的概念應(yīng)用于鏈接列表。

首先改變字體大小，從大到小的字體大小變化，鏈接優(yōu)先級非常好;更深更淺的色彩營造出時(shí)間感，讓用戶非常清楚地了解什么是最重要的。

作者從火車到車站播放音樂的靈感應(yīng)用于設(shè)計(jì)，所以我們通常應(yīng)該外出散步，觀察生活，開闊視野，看看有什么令人興奮的設(shè)計(jì)。

第二部分：學(xué)習(xí)

本節(jié)重點(diǎn)介紹如何與用戶進(jìn)行更清晰的溝通。首先，兩個(gè)例子討論如何修改文本以傳達(dá)更多含義。第三個(gè)例子討論了當(dāng)文本不能勝任時(shí)如何使用視頻來彌補(bǔ)。

　1. 網(wǎng)站文字描述

用戶通常不會閱讀網(wǎng)站上的文字。他們只是掃描。如果它們是很長的介紹性文本，它們往往會直接忽略它們。短文可能會引起注意。對于用戶來說，短句比大段文本更有意義。重要的不是提供了多少信息，而是它是否能夠?yàn)樗麄兲峁┧麄冋嬲枰男畔ⅰ?

　2. 視頻的應(yīng)用

當(dāng)您無法用文字描述某些內(nèi)容時(shí)，請學(xué)會使用視頻。

　第三部分：搜索

這部分主要討論三個(gè)部分，即：搜索本身，搜索結(jié)果列表，以及精確的搜索條件，以獲得最有效的結(jié)果。

　1. 采用自動完成搜索

優(yōu)點(diǎn)：自動完成搜索意味著系統(tǒng)可以嘗試猜測用戶輸入的文本并動態(tài)搜索適應(yīng)的結(jié)構(gòu)，然后將其推薦給用戶以幫助他們輸入。這可以防止用戶輸入拼寫錯(cuò)誤，確保搜索更有效，同時(shí)避免用戶搜索數(shù)據(jù)庫中存在的詞匯之外的新命名。

△作者示例：在DTRT的情況下，這個(gè)自動完成搜索輸入框一方面可以防止用戶輸入拼寫錯(cuò)誤，同時(shí)避免用戶添加各種新名稱。

限制：自動完成功能可能會誘使用戶放棄自己正確的想法，并選擇網(wǎng)站推薦的搜索詞匯，但實(shí)際上效率較低，這樣我們就可以在輸入的字符數(shù)足以使推薦詞有意義。顯示推薦的單詞并將字符限制為3~4。

　2. 高級搜索要簡潔

什么是高級搜索：許多網(wǎng)站都有快速搜索按鈕，并且有一個(gè)高級搜索選項(xiàng)可以滿足用戶需求，如下面的谷歌瀏覽器瀏覽器所示（現(xiàn)在谷歌瀏覽器已經(jīng)簡化設(shè)計(jì)，下面的圖片是作者編輯的時(shí)候書籍版）：

△非常復(fù)雜，點(diǎn)擊高級搜索并跳出很多選項(xiàng)，一些選項(xiàng)用戶根本不需要它。那些需要高級搜索的人實(shí)際上只需要幾個(gè)選項(xiàng)，用戶的行為模式告訴我們不需要一次性放置所有選項(xiàng)。全部顯示，最好只在必要時(shí)添加選項(xiàng)。

作者采用逐行顯示的設(shè)計(jì)方法，根據(jù)實(shí)際需要逐步顯示控件。以下圖片是作者的設(shè)計(jì)：

主要做了一些改變：

單擊“高級搜索”以僅添加一個(gè)搜索條件。如有必要，請單擊“添加”按鈕以添加其他搜索條件。這將避免用戶可能不會使用的大量搜索條件的突然出現(xiàn)。

使用高級搜索時(shí)，將禁用簡單搜索按鈕，以便用戶不會被兩個(gè)搜索按鈕混淆。

　第四部分：深入

　　1. 如何設(shè)計(jì)視頻播放器

使按鈕更易于用戶操作。

此外，作者的改進(jìn)是：

通過將較長的視頻分成小章節(jié)，用戶可以選擇播放他想要觀看的部分。例如，根據(jù)不同的主題將人的語音視頻分成不同的部分，以便用戶可以容易地選擇他想要看的章節(jié)，而不必閱讀所有的視頻。

添加視頻標(biāo)題，讓用戶知道他們正在觀看的視頻的大致內(nèi)容。

　2. 如何設(shè)計(jì)表單

使用單列布局時(shí)，左列和右列的布局將減慢用戶的瀏覽速度。

使“確定，取消”按鈕更完美，將“確定”按鈕對齊到頁面左側(cè)，首先對齊左邊，使所有元素依賴于左側(cè)，從窗體的頂部到底部形成一條漂亮的線條，這是一種美學(xué)選擇。其次，將OK按鈕放在左側(cè)的原因是使用tab鍵首先切換輸入字段的是左側(cè)的按鈕，如下所示：

按鈕上的文本“確定，取消”將替換為更生動，更準(zhǔn)確的文本。如下圖所示：

以上是作者的觀點(diǎn)，我不同意按鈕的放置和對齊方式。在日常交互設(shè)計(jì)中，我們經(jīng)常遇到這樣的問題，例如“OK”按鈕是放在左邊還是右邊？如何對齊？是否顯示或隱藏了禁用狀態(tài)的按鈕？ “確定”按鈕的優(yōu)先級為高或“取消”按鈕具有高優(yōu)先級。按鈕的形狀設(shè)計(jì)為矩形矩形或圓角矩形或其他形狀。在這次分享中，這部分內(nèi)容不會過多討論。

　3. Wizard 向?qū)?/strong>

有時(shí)我們填寫表格，點(diǎn)擊完成頁面上的表格，下一步將加載新頁面，然后繼續(xù)填寫，將出現(xiàn)另一個(gè)表格，這將導(dǎo)致用戶混淆并失去耐心，如圖所示下面：

如何消除用戶的挫敗感？我們需要事先告訴他們有多少步驟，并告訴他們他們?nèi)ミ^哪里，現(xiàn)在在哪里以及將來去哪里。

首先，為每個(gè)步驟添加描述標(biāo)題欄，向用戶顯示所有步驟名稱，并且可以編輯正在進(jìn)行的步驟。后續(xù)步驟不可點(diǎn)擊，因此用戶不能隨意錯(cuò)誤訂單并完成上一步驟。下一步將進(jìn)行。作者的計(jì)劃如下：

上述解決方案的局限性在于網(wǎng)頁的水平空間有限，如果步數(shù)太多，則會出現(xiàn)水平滾動條。用戶操作水平滾動條非常麻煩，但網(wǎng)頁的垂直方向是無限的，所以改進(jìn)是：

　4. 有字符數(shù)限制的輸入框的設(shè)計(jì)

首先，在用戶開始輸入之前，提示用戶限制只能輸入的字符數(shù);在用戶輸入過程中，為了避免用戶可以輸入的字?jǐn)?shù)，需要設(shè)置一個(gè)隨字?jǐn)?shù)變化的計(jì)數(shù)器;顏色數(shù)（顏色，厚度，大?。┨嵝延脩艨奢斎氲淖址麛?shù)用完。計(jì)劃如下：

　第五部分：參與

在這部分內(nèi)容中，我分享了我認(rèn)為最好的內(nèi)容，并且不會重復(fù)對許多細(xì)節(jié)的描述。

　評分系統(tǒng)的設(shè)計(jì)

評級頁面一般分為兩個(gè)部分，一個(gè)是顯示布局，告訴用戶已經(jīng)有評估結(jié)果，另一個(gè)是編輯布局，用戶可以得分。有些網(wǎng)站在設(shè)計(jì)時(shí)只需要點(diǎn)擊某顆恒星，只不過星星會從白色變?yōu)辄S色而無法獲得其他反饋，這會讓用戶對是否成功得分感到困惑。雖然這種交互過程很簡單，但用戶體驗(yàn)并不好，我們不能簡單明了。良好的互動不是讓用戶以最少的步驟完成任務(wù)，而是為了從每一步獲得用戶的反饋，效率不是所有問題的答案，比效率更明顯更重要。

作者給出的解決方案如下：

第六部分：管理信息

　　1. 自定義標(biāo)簽

每個(gè)人都有不同的看法，標(biāo)簽是不同的，不同的人可能會創(chuàng)建標(biāo)簽的多個(gè)版本，所以我們需要一些方法來檢測類似的標(biāo)簽，并讓用戶想要標(biāo)記內(nèi)容選擇現(xiàn)有的標(biāo)簽。

第一種方法是網(wǎng)站應(yīng)提供像谷歌這樣的自動完成功能（我們已在上面說過）。

第二種方法是在用戶輸入標(biāo)簽后，系統(tǒng)搜索近似標(biāo)簽，然后在下一頁上顯示。頁面可以使用文本向用戶解釋他可以將新標(biāo)簽與其他人已經(jīng)創(chuàng)建的標(biāo)簽相匹配。

　2. 啟發(fā)式的設(shè)計(jì)

啟發(fā)式設(shè)計(jì)允許用戶提高效率并保持從一個(gè)界面到下一個(gè)界面的一致性和一致性，而設(shè)計(jì)元素使交互更容易學(xué)習(xí)并重復(fù)相同的交互。每次交互的每一步都需要盡可能簡單明了，特別是在“操作”狀態(tài)下。

　3. 為改變(更新)而設(shè)計(jì)

為新版本的發(fā)布設(shè)置一個(gè)明確的時(shí)間，提前給用戶提供準(zhǔn)確的信息，而不是新版本的突然發(fā)布，給用戶帶來麻煩，通過向用戶發(fā)送消息，那些活躍的用戶將有一個(gè)新版本非常感興趣，然后告訴更多的朋友;普通用戶會得到足夠的警告;那些已經(jīng)注冊并放棄但尚未刪除該帳戶的人將被提醒再次訪問我們的網(wǎng)站。

　第七部分 ：離開

用戶退出后，動員用戶再次登錄

用戶退出后，再次返回登錄頁面，重新登錄登錄頁面，并鼓勵(lì)用戶通過添加營銷推廣網(wǎng)站的內(nèi)容再次登錄，而不是使出口變得復(fù)雜，將用戶拖離其中。

歡迎關(guān)注作者的公開號碼：“宴會”