中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

設計做久了，我們也需要回頭看看最基礎的知識，通過對實例的思考與解析，加深對尼爾森十大可用性原則的理解與應用。

一、系統狀態的可見性（Visibility of system status

“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”

系統應該在合理的時間內通過適當的反饋，始終讓用戶了解正在發生的事情。

——Nielsen

具體「狀態可見」筆者認為可以從以下幾點來講，但不局限于這幾點：

1「我在哪」

系統需要提供準確的導航，讓用戶知道他在哪里，他能去什么地方以及如何到達那里?？梢酝ㄟ^導航菜單、面包屑、標簽頁、步驟條、分頁器等讓用戶明確自己的在系統中所處的位置。設計者在設計的過程中，要注意提供上下文線索，避免用戶迷路。

Ant D的系統導航

2「狀態反饋」

用戶需要知道當前要做什么，并且操作的結果如何，也可以給用戶的下一步行為做參考。當用戶在與系統進行交互時，我們應當為用戶在各個階段提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶。

可以使用的形式包括但不局限于：警告提示、通知、徽標數（Badge）、加載進度反饋、輸入反饋、結果反饋、反饋浮層、反饋彈窗。

云村徽標數反饋

WeChat表情添加成功反饋

京東加入購物車動畫反饋

3「任務進度」

用戶在進行某項任務時，應當通過進度條，數字等方式給予用戶進度提示，減緩用戶焦慮感。

內容加載時，可以通過以下方式，讓用戶知道系統在工作，減緩用戶等待的焦慮感。

（1）加載動畫

（2）分步加載

優先加載占網絡資源較小的元素。如先文字和默認圖標后圖片，圖片加載完成前使用占位符顯示；當加載的頁面內容有固定的框架時，可以先加載框架，再加載框架內的內容。此方式能夠及時展示相應內容，減少用戶心理等待時間。

（3）占位符加載

我們可以事先在App預設好圖標或者占位符來代替加載的文字、數字、圖片等數據。告知用戶此處有內容，只是還沒有加載出來。占位符可以讓用戶從樣式上看出界面布局大概是哪些內容。

（4）懶加載

淘寶網、知乎等大流量網站都已經使用了圖片滾動懶加載的方案——僅當圖片滾入視窗，被用戶看到的時候，才會去真正加載，避免網絡資源浪費。

loading動畫

簡書占位符加載

閑魚&愛回收

二、貼近用戶真實環境（Match between system and the real world）

“The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”

系統應該說用戶的語言，用戶熟悉的單詞，短語和概念，而不是系統導向的術語。遵循現實世界的約定，使信息以自然和合乎邏輯的順序出現。

——Nielsen

1「使用目標用戶的語言」

用戶在使用產品的過程中，其大腦會“優待”較常用的記憶內容和操作形式，有意抑制那些相似但不常用的內容，以便減輕認知負擔，防止混淆。這種習慣從某種程度上來說屬于“熟知記憶”。簡單講就是說人話，使用目標用戶的熟悉的語言「圖形、配色、風格」，不需要故作高深，就像張小龍說的，做產品要有傻瓜心態。

下圖中，每日優鮮的「菜市場」、「水果店」，B站的「手辦」等等，都是其目標用戶的語言：

每日優鮮 &B站

2「使用現實世界中的隱喻」

從現實世界中借鑒的設計元素可以顯著的降低用戶的認知和學習困難，并增加他們的使用興趣。網易云音樂的膠片設計就是一個很好的例子，還有微信讀書的「書架」也一樣是現實世界的隱喻。

三、用戶有控制來去自由的權利（User control and freedom）

“Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.”

用戶通常會錯誤地選擇了系統的某個功能，并且需要一個明確標記的”緊急出口“來離開不想要的狀態，而不必進行擴展對話。支持撤消和重做。

——Nielsen

系統應當支持「撤銷、重做、返回」等操作，讓用戶可以從哪里來到哪里去。會帶來嚴重后果的，或者不可逆的操作，最好給用戶提供二次確認彈窗，如果用戶誤操作，可以通過二次確認，避免錯誤加深。常見的二次確認主要可以通過以下方式實現：

• 通過文字提示，用戶閱讀后點擊是與否來進行下一步
• 通過動作，用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作
• 通過身份校驗，用戶需要提交個人身份信息以完成校驗

Teambition刪除項目的二次確認彈窗

四、系統的一致性（Consistency and standards）

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

不應該讓用戶懷疑不同的話語、場景或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例，保持一致性。

——Nielsen

1「與業內產品保持一致」

與用戶的操作習慣保持一致，意味著用戶不再需要重新學習，就可以在各種應用中自由切換，從我們自身產品的角度來講，用戶學習成本的降低，也意味著我們獲客成本從某種程度上被降低。所以我認為，同類軟件設計的趨同化，未必不是一件好事。尊重用戶已有的操作習慣。

就像我們可以看到的，所有的電商網站基本上都遵循著類似的交互邏輯和視覺元素。這些約定俗成的慣例，意味著用戶不再需要重新學習在某個新的平臺上購物，降低學習成本。而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。

2「產品內部保持一致」

通用的信息應該使用一致的用詞、外觀和布局，可以幫助用戶快速學習、記憶和熟悉產品的功能。例如：IOS系統采用同樣的顏色來表示可點擊元素。

3「版本迭代之間的一致性」

產品的不同版本之間，主要的功能、設計元素等，盡量有一定的延續性，避免用戶產生困惑。例如：IOS系統的幾個版本之間都有一定的創新，但仍然保留了許多原有的設計規范。

五、防止錯誤（Error prevention）

“Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

系統要么消除容易出錯的情況，要么檢查它們，并在用戶采取行動之前向用戶提供確認選項。

——Nielsen

用戶難免會犯錯，一個好的產品可以降低用戶犯錯的概率，并且提升錯誤被解決的效率。簡單點講就是，用戶使用產品的過程中肯定會遇到坑，我們要不幫助用戶避免這些坑，即使用戶掉進坑里，也能讓他們很快的爬出來，也可以稱之為“產品設計的容錯性”。

「防止錯誤」我理解上主要分為三個階段：錯誤行動發生前，引導用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發生之后，提供撤回的入口。

比如iphone的照片刪除，從相冊刪除時，會進入回收站，開始30天倒計時，倒計時結束，才算真正刪除。

在我個人看來，對回收站的理解是，如果用戶不小心連續刪除照片的時候，突然把一張不需要刪除的的也給刪掉了，但是已經來不及撤銷了，所以可以在回收站里進行恢復。或者是當時覺得不重要不需要的圖片刪除了，之后一些天又有需要的時候，在回收站里可以扒出來。

iPhone從相冊刪除和從回收站刪除的提示

其次，在某些特殊的場景下，危險操作可以可以直接置灰。

六、系統識別勝過用戶記憶（Recognition rather than recall）

“Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

通過使用對象、動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔。

——Nielsen

好記性不如爛筆頭，盡可能通過我們系統，減少用戶的記憶負擔。

1. 記住用戶的操作記錄

比如現有的主流視頻播放軟件，基本都會以賬號為體系，跨設備記住用戶上次觀看的進度，以便在下次在任何設備上打開時，都可以接著上次的觀看進度繼續播放。

2. 一個流程對應一個操作目標

在用戶的操作流程中，應當減少操作路徑，同時保持正確的對應關系，一個流程只有一個重要的操作，一次操作只有一個結果，邏輯清晰，有先有后，如果操作過程中，需要用戶做出選擇，則提供一個優選項。

3. 提供適量的信息

多數情況，用戶記憶信息在7±2左右，1個記憶最牢靠。3個最清楚，7個以上就需要給信息進行分類，來幫助用戶理解和記憶。通過合理的設計手段，來使信息有效地推送給用戶，或者幫助用戶輕松完成任務。

4. 選擇而不是輸入

可以的情況下，盡量讓用戶選擇而不是輸入。對用戶側而言，選擇的操作成本肯定是比輸入要低。

• 比如美團上，輸入海底撈，會為用戶智能推薦具體的門店。
• 支付寶的搜索頁，會展示用戶的搜索記錄和熱門推薦。

美團

支付寶搜索默認頁

七、靈活性和使用效率（Flexibility and efficiency of use）

“Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”

好的產品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶，把不必要的信息占據重要部分。

——Nielsen

可以通過設置快捷入口、列出用戶最近訪問、給用戶默認選項，減少多余操作等方式提高產品的靈活性和使用效率。

阿里云控制臺側邊欄展開效果

提高產品的靈活性還有一個很重要的點，要考慮到產品的長遠性。作為設計師，我們不能孤立的看待某次改版和某個接到的產品需求，我們要在思考當前需求的同時，對下個版本（甚至接下來三個版本）的需求要有比較清晰的預判和認知。然后去將后續版本中可能調整的地方在本期的需求里預留可拓展性。

這樣結合產品整個生命周期來進行設計的產品，才能具有較好的靈活性，否則只是不斷的功能累加，產品框架可能會在一次次功能迭代中變得混亂。

八、美觀和簡約設計（Aesthetic and minimalist design）

“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”

不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。

——Nielsen

互聯網用戶瀏覽網頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息，擁有良好的視覺層次結構，降低頁面干擾。

產品設計的四大基本原則：親密性、對齊、重復、對比。

四大基本原則的應用思路：把信息歸入邏輯親密性，利用對齊，找到并制造重復元素，加入對比。

• 彼此相關的項應當靠近，歸組在一起，建立更近的親密性。親密性的根本目的是實現組織性。將頁面劃分成明確定義的區域。用戶在第一眼掃視之后，快速定位到所需的有用信息，忽略不感興趣的部分，大大節省獲取信息的時間。
• 對齊的根本目的是使頁面統一而且有條理。建立清晰的頁面視覺層次，有助于用戶快速弄清楚當前頁面信息之間的從屬、主次或關聯等輪廓。突出重要的信息元素，邏輯上相關的部分在視覺上也相關，邏輯上包含的部分在視覺上嵌套。
• 重復的根本目的是統一，并增強視覺效果。盡量利用習慣用法，既能遵從用戶的習慣便于用戶理解，又能避免不必要的重復造輪子。
• 對比的根本目的是增強頁面的效果（更有可讀性），有助于信息的組織（防止混淆）。最大限度降低干擾，降低頁面上的視覺噪聲。吸引用戶眼球的信息不宜過多，以免用戶眼花繚亂。

九、幫助用戶識別、診斷，并從錯誤中恢復（Help users recognize, diagnose,and recover from errors）

“Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”

錯誤信息應該用通俗易懂的語言表達，較準確地指出問題，并且提出解決方案。避免通過代碼等用戶難以理解的形式。

——Nielsen

1. 提供解決方案

下圖為訪問某網站時，谷歌和Safari的提示，點開谷歌提示上的藍色文字「檢查代理服務器和防火墻」，會給出更詳細的解決方案，根據其指示操作，就可以解決問題。但是反觀Safari，我可能就不能理解具體問題出在哪里了。

2. 幫助用戶從錯誤中恢復

微信撤回的消息支持重新編輯，用戶可能輸入錯了某個字而撤回，重新編輯，只需要對錯誤的字進行修改，無需再編輯大段文字。這個功能，我在實際使用的過程中，頻率還是挺高的。

順便說一個體驗不太好的地方，公眾號后臺文章編輯器，停留的時間太久之后（我都是零碎時間寫幾個字，?，所以會可能上次打開的，過幾個小時再編輯一下），上傳圖片就會顯示失敗，但不提示原因。最初，我會反復導出圖片，覺得應該是圖片有問題，后來，偶然發現是頁面停留時間過長，刷新一下頁面就好了。

十、幫助文檔（Help and documentation）

“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”

如果系統能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索，且專注于用戶的目標任務，并列出具體的步驟來告知用戶。

——Nielsen

我們設計的時候，需要根據幫助文檔的重要性來決定其具體形式。一些比較簡單的引導，比如改版引導、新功能引導，通常只需要出現一次即可；表單填寫時的一些疑難字段，可以通過小問號hover提示；一些太復雜的操作提示，包括具體步驟截圖啊之類的，就會單獨形成一篇幫助文檔，來給用戶提供指導。

幫助的提示應當是易于理解、方便查找、便于應用的。

谷歌搜索的幫助提示

阿里云幫助文檔

本文由 @張大俠 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。