01-用戶做些什么
好的界面始于對人的理解，軟件對于用戶來說，只是達到目的的一種手段。我們需要了解用戶，因為他們不是你。
了解用戶可以幫助我們發(fā)現(xiàn)問題、定義問題，解決真正的問題。了解用戶的方面包括：使用軟件的目標以及達到目標需要完成的任務、使用軟件的場景、用戶的基本背景（使用同等軟件的技巧、平常使用的語言和詞匯）。
了解用戶的形式包括：直接觀察、案例研究、帶哦差問卷、訪談、人物角色、用戶測試等
軟件提供給用戶的自由度應當由用戶的特性決定，是大部分都會停留在新手用戶（很長時間使用一次，如繳費），還是大部分會愿意學習成為中級用戶甚至高級用戶（如sketch等工具類軟件）。大部分情況，軟件應該處于中間狀態(tài)，為兩類用戶提供服務：讓新手用戶快速學習；讓老用戶發(fā)掘更多新功能。
模式
安全探索
防錯、容錯，讓用戶隨時可以撤銷、回退。
即時滿足
讓用戶可以快速開始使用——開箱即用。避免一開始就需要閱讀大量的指導性說明，讓用戶感到畏懼與門檻。
滿意即可
人們只需要達到目標，不希望有多余的思考。復雜的頁面對用戶而言意味著繁重的認知負擔，所以要削減界面的復雜度，文字描述簡單、布局能夠表明結(jié)構(gòu)與引導順序、讓用戶能夠回退。
中途變卦
用戶的操作流程有可能會被被的事情打斷，需要記錄進度，支持從暫停的地方開始，防止出現(xiàn)重復的工作。
延后選擇
在主要流程中只需要獲取關(guān)鍵信息，對于附加信息，允許用戶后續(xù)再做補充。這樣讓主流程盡可能的簡潔，用戶可以更快的完成任務。如注冊過程中只需要手機號碼。關(guān)于用戶賬號的自定義信息可以讓用戶進入APP后，隨時在個人中心修改。
遞增構(gòu)建
對復雜任務進行分解，讓用戶一次完成一部分工作，最終全部完成，而不是要求一次性完成。
習慣
常用的操作與主流用法保持一致。應用內(nèi)的操作也應該保持一致性，符合用戶習慣，減少出錯。
空間記憶
人們經(jīng)常通過位置來回憶東西或者文檔，而不是通過名字。所以，應用內(nèi)不同頁面、不同模塊中相同的元素（按鈕、信息等）應該放在相似的位置，方便用戶找到。
前瞻記憶
讓用戶自定義添加標記，進行分組、分類、提示，如ps中用顏色標記區(qū)分圖層。讓用戶在長線程的任務中，在后續(xù)的時間點再次打開的時候，能夠記起上次的操作、未完成的事項等。
簡化重復工作
當操作對象比較多時，讓用戶方便的批量操作，或者可以自動重復、復制粘貼等，減少同樣的動作需要人來執(zhí)行N遍。
只支持鍵盤
頻繁的在鼠標和鍵盤之間進行切換，會影響效率。在表單中考慮使用tab鍵切換，讓鼠標的操作和鍵盤的操作集中到一起，而不是來回切換。
旁人建議
讓用戶之間自主溝通，就像小米/魅族的用戶論壇，讓用戶之間互相幫助，既可以自發(fā)的解決問題，也可以培養(yǎng)用戶的歸屬感與認同感。
02-組織內(nèi)容、信息架構(gòu)和應用結(jié)構(gòu)
切分內(nèi)容：關(guān)注任務的整體流程而不是具體使用哪種控件，將動作與對象順暢的結(jié)合。
物理結(jié)構(gòu)：用面板、窗口、頁面等元素將布局、流程表達出來。包括多窗口、單一窗口分屏、單一窗口分頁。
流程包含的元素：對象（如收件箱）、某種主題的列表（如星標郵件分組）、動作或任務列表（如撤銷、發(fā)送）、工具列表（如日歷）
模式
雙面板選擇器
what：相鄰的兩個面板，一個顯示概要標題列表，一個顯示選中左側(cè)某一條后的詳情。如郵箱的分屏模式。
when：web、pad端的收件箱、照片查看等既有列表，又需要查看單條詳情的情況。
why：大屏幕時可充分利用屏幕空間，減少頁面跳轉(zhuǎn)。
用戶的視線移動距離也較短。
減少用戶的記憶負擔，對于單條記錄在列表中的位置可以隨時查看，又不影響查看詳情。如Mac 系統(tǒng)的文件夾。
how：上下布局或左右布局，支持鍵盤方向鍵在條目間移動，同時突出當前已選中的條目。
畫布+調(diào)色板工具條
what：空白畫布的操作區(qū)域+承載不同類型工具的工具條。
when：圖形編輯器等軟件。
why：對于對象的操作結(jié)果，可以實時、直觀的看到，所見即所得。同時，與實際的畫畫的場景類似，用戶能夠快速理解與熟悉。
how：空白畫布應當占據(jù)主要視覺部分。工具條的位置、工具條中工具的組織分類應當通過可用性測試來驗證。
單窗口深入
what：在一個單一的窗口中顯示應用程序的每個頁面，層層深入。每次都用新的內(nèi)容來替代當前的內(nèi)容。
when：顯示空間受限，如手機。任務為單一的線性流程。
why：將任務拆解到不同的頁面，可以減少單一頁面的復雜度，用戶在每個階段面臨的選擇和認知負荷較小，可以更好的聚焦于當前的任務，更高效的完成。
how：使用面包屑或者序列地圖導航，讓用戶知道當前的位置，同時可以隨時在流程間跳轉(zhuǎn)。
層級應該盡可能的簡單，避免過于瑣碎冗長，讓用戶失去耐心。
可選視圖
what：讓用戶可以選擇不同的顯示模式，如圖標查看、列表查看。
when：顯示格式化的內(nèi)容，如照片、圖表等。
why：滿足不同場景的顯示需求，如打印時顯示打印模式。
how：提供視圖切換按鈕；將用戶選擇的視圖模式作為下次打開的默認視圖。
向?qū)?/b>
what：在界面上一步步引導用戶按預定的順序完成操作。
when：任務過程鏈路很長且復雜。
why：根據(jù)?？硕?，減少每一次需要認知的選擇對象，簡化任務難度。
how：步驟的切分應當按照業(yè)務關(guān)系歸并到一起，切分的數(shù)量和粒度不能太細；允許用戶隨時向前/向后移動；提供良好的默認值，簡化用戶的操作；專家用戶會被向?qū)Ｊ较拗频煤芩?，最好能提供自定義的模式。
需要時顯示
what：將重要的內(nèi)容顯示出來，將其他的隱藏起來，讓用戶通過一個簡單的操作訪問隱藏內(nèi)容。
when：頁面需要顯示的內(nèi)容較多，但是又想要保持簡潔。
why：簡約法則中的隱藏原則。在簡單的情況下可以滿足大部分需求，突出重要內(nèi)容，節(jié)約顯示空間。
how：將大部分情況下都不會被使用的功能/信息進行隱藏。
有趣的分支
what：將一些有趣的內(nèi)容入口放置在頁面中，通過標簽等方式吸引用戶探索。
when：在線性流程的主線之外，提供一些額外的內(nèi)容（解釋、定義、幫助文本等）
why：讓具有學習意愿的用戶自由探索，增加產(chǎn)品的豐富程度，讓中級用戶向?qū)＜矣脩暨^渡。
how：將用戶有可能感興趣的、想要了解的在支線中展示，同時能讓他們快速返回主線任務。
多級幫助
what：使用不同類型、不同重量級的幫助來滿足用戶的不同需求。
when：系統(tǒng)較為復雜、專業(yè)的術(shù)語等比較多時，用戶可能不理解，需要提供幫助。
why：完整的幫助適合于不在任務當中、長期使用、具有耐心的用戶，幫助用戶系統(tǒng)的了解。簡短的幫助適合于任務中的流程解釋、名詞解釋或者對于偶爾使用一下的用戶，只需要針對其需要完成的任務提供幫助。
how：輕量的如占位符的輸入提示、標簽/工具懸浮時顯示介紹文字，不會影響當前的任務流程。需要注意文字表述的簡潔性。在線手冊、用戶文檔等，需要單獨提供窗口/頁面進行顯示，需要提供入口。同時文檔的結(jié)構(gòu)應當與系統(tǒng)想信息架構(gòu)保持一致并提供搜索，便于用戶查找。
03-到處走走：導航、路標和找路
用戶知道自己現(xiàn)在在哪里，接下來要去什么地方，以及怎樣才能到達那里。通過良好的標記、環(huán)境線索、地圖等來告訴用戶這些信息。
導航的目的其實就是多個頁面之間如何關(guān)聯(lián)，如果能同在一個頁面快速完成，那也就不需要導航了。盡量減少上下文的切換，讓用戶在上下文之間保持連貫，不需要記憶。
模式
清楚的入口點
what：界面的入口指向具體的任務，并且具有自描述性，讓人能夠看懂。
when：面向具體任務的應用，目的性較強。不會信息過載，讓用戶不知道從哪里開始。
why：讓用戶知道應用可以做什么，快速開始任務。
how：突出最主要的動作，讓核心功能成為應用的“大門”。
全局導航
what：用一塊固定的區(qū)域顯示菜單，讓用戶無論在哪里都可以看到。
when：信息結(jié)構(gòu)復雜的大型網(wǎng)站，模塊較多。
why：每個頁面都可以看到菜單，人們可以看到總體視圖，在不同的模塊間切換會比較容易。
how：數(shù)量要合適，文字的描述要對用戶有意義，突出當前的位置。
中心和輻條
what：將功能分割成不同的獨立的模塊，在主頁展示各個模塊的入口。類似工作臺的模式。
when：功能之間互相獨立。顯示區(qū)域的影響，不能展示全局菜單。
why：用戶可以在進入一個模塊后，聚焦于當前的任務，完成后再退出。
how：通過尺寸、顏色等區(qū)分各模塊的層級。模塊內(nèi)任務的結(jié)尾應該可以將用戶直接帶回首頁。
金字塔
what：每個頁面都可以從主頁進入，然后回到主頁。各個頁面之間可以通過翻頁來橫向跳轉(zhuǎn)。
when：類似文件夾查看的模式，經(jīng)常和單窗口深入的模式一起使用，路徑再深也能即時回到主頁。
why：組織關(guān)系比較明確，同時讓用戶在較深的路徑中可以更快的回到起點。
how：把前進、后退的導航放置在固定位置，減少鼠標移動的距離。
模態(tài)面板
what：用戶在關(guān)閉彈窗前，不能操作其他部分。
when：沒有用戶協(xié)助，系統(tǒng)就無法繼續(xù)前進的狀態(tài)。
why：聚焦用戶的注意力
how：需要有一個出口，讓用戶可以逃離當前的狀態(tài)
序列地圖
what：步進器、步驟條來告知用戶進度。
when：任務流程復雜，被拆解成多個步驟。
why：讓用戶知道整個流程需要完成哪些工作，自己已經(jīng)完成了多少。
how：對不同狀態(tài)（已完成、正在進行、未完成）狀態(tài)進行視覺區(qū)分。
面包屑層級結(jié)構(gòu)
what：在層級結(jié)構(gòu)的每個頁面，顯示所有父級頁面的鏈接，向上追溯到主頁面為止。
when：樹形結(jié)構(gòu)的信息架構(gòu)，采用單窗口深入的模式。
why：顯示整個網(wǎng)站或應用的一個線性切片，從而避免顯示整個網(wǎng)站結(jié)構(gòu)的復雜性
只告訴用戶當前頁處于整個系統(tǒng)的位置，不關(guān)心他接下來要去哪里。
how：一般位于頁面頂部的固定位置，每個層級的標題能夠自我解釋。
注釋滾動條
what：在長頁面的向下滾動過程中，顯示當前的位置信息，如pdf的多少頁
when：以文檔/表單瀏覽為中心的場景，頁面很長。
why：更加詳細的指示當前的位置，對全局也有更好的了解。
how：動態(tài)指示：滾動時顯示頁碼。靜態(tài)指示，在進度條上用顏色標示位置。
顏色編碼的欄目
what：同一個模塊用同一個顏色來保持整體性，不同模塊用不同顏色表示區(qū)分。
when： 模塊化的內(nèi)容，每一塊都有不同的目的或者目標用戶。
why：區(qū)分不同的模塊或欄目
how：為照顧色盲用戶，不應該將顏色作為唯一的區(qū)分方式。
動畫轉(zhuǎn)換
what：頁面的切換、位置的變化等通過動畫來過渡。
when：移動、縮放、跳轉(zhuǎn)等狀態(tài)翻轉(zhuǎn)的時候。
why：連續(xù)的動作讓用戶保持方向感，不會覺得突?；蛴捎谵D(zhuǎn)變太快而不知道發(fā)生了什么。增加產(chǎn)品的趣味性與解釋性。
how：符合動畫的物理規(guī)律。效果要微妙而非整個頁面一起動。
逃生艙
what：讓用戶隨時可以從當前狀態(tài)退出到默認狀態(tài)的機制。
when：導航受限的情況，如模態(tài)彈窗時，用戶沒法自由的跳到其他頁面。
why：讓用戶隨時可以撤銷，讓用戶具有掌控感，鼓勵用戶大膽探索。
how：通過關(guān)閉、取消等按鈕/鏈接來退出當前頁面、撤銷之前的操作。
04-組織頁面：頁面元素的布局
頁面布局是通過注意力的引導來完成對含義、順序和交互點的傳達。 主要包含5個方面：視覺層次、視覺流、分組和對齊、組織 、動態(tài)顯示。
視覺層次主要是重要程度的區(qū)分，讓人從布局就可以了解信息的基本結(jié)構(gòu)。
視覺層次的主要區(qū)分方式：左上角優(yōu)先：按照F型瀏覽，從左至右的閱讀順序，左上角最先被注意到；空白：主要用于內(nèi)容區(qū)塊的隔離；字體對比：字重、字號、顏色等進行視覺層次的區(qū)分；前景色與背景色的對比：顏色深淺；位置、對齊、縮進：縮進的文字屬于上一層的信息；圖形（線條、線框、背景色）：切割區(qū)塊，充當內(nèi)容容器的作用，讓區(qū)塊內(nèi)的內(nèi)容具有整體感。
視覺流：通過焦點的切換讓用戶按預先設計好的線路瀏覽。一般遵循從左到右、從上到下的瀏覽順序。
分組和對齊：將相關(guān)元素放到一起，讓人由粗到細的瀏覽，更好體現(xiàn)層次結(jié)構(gòu)，簡化信息的復雜性，幫助人們快速理解。包含格式塔心理學的連續(xù)、封閉、相鄰、相似幾項基本原則。
動態(tài)顯示：切換顯示、滾動條、響應式展開等。
模式
視覺框架
what：頁面的基本布局、顏色、格式方案等保持一致，建立一套系統(tǒng)自我的設計規(guī)范。
when：頁面比較多
why：產(chǎn)品更像一個整體，人們也更加容易快速上手。同時，不同頁面中變動的內(nèi)容也會更加吸引人的注意力。
how：顏色、字體、布局、控件、間距等，按照原子設計理論由基本元素到業(yè)務組件的統(tǒng)一化。
中央舞臺
what：最重要是元素占比最大，如文檔編輯中，文檔內(nèi)容的占比最大。
when：面向某種具體任務，如文檔、圖片的編輯，表格的填寫等。
why：將用戶的視覺迅速引導到最重要的信息。清晰的中央元素可以鎖定他們的注意力。
how：尺寸上占據(jù)叫大面積，與周圍元素形成對比；通過大的標題來吸引注意力，突出重點關(guān)鍵信息。讓用戶打開即可看到。
帶標題的欄目
what：通過醒目的標題來區(qū)分不同欄目的內(nèi)容。
when：頁面上內(nèi)容較多，為了讓用戶快速掃描
why：快速瀏覽、由粗到細、結(jié)構(gòu)清晰。
how：標題的文字通過字號、字重、顏色來突出。不同的欄目使用不同的背景色。欄目/模塊之間通過間距、分割線等方式進行區(qū)分。
卡片堆
what：tab頁切換模式
when：頁面內(nèi)容較多，而用戶一次只關(guān)注其中一個欄目。
why：結(jié)構(gòu)清晰，用戶也比較熟悉。
how：內(nèi)容的組織架構(gòu)劃分合理；標題簡短、具有自明性；選項卡的數(shù)量一般6個以下，較多時考慮水平滾動展示。
可關(guān)閉的面板
what：多面板的顯示，可以打開/折疊。
when：內(nèi)容在需要時顯示，可以利用縱向空間。
why：卡片堆的模式來組織不同大小的欄目，顯示空間尺寸會保持一致，小欄目使用大空間，會顯得很空，但是可關(guān)閉面板的顯示空間會比較靈活。
用戶可以同時打開多個對比查看，也可以一次只看一個。對于不重要的內(nèi)容，一般默認收起。
how：標題簡短且具有自明性，使用箭頭、+、△等符號暗示可以展開。
可移動的面板
what：單頁面劃分模式，用戶可以自定義每一塊劃分區(qū)域的大小。
when：各區(qū)域的內(nèi)容有關(guān)聯(lián)關(guān)系，但是不需要放到一起。
why：讓用戶通過空間記憶模式來記住自己把東西放到哪里了，最終季用戶和專家用戶來說更友好。
how：定義網(wǎng)格，讓頁面自動對齊。功能的可發(fā)現(xiàn)性：提供暗示可以拖動的符號；容錯：讓用戶可以一鍵恢復默認布局模式。
右對齊/左對齊
what：表單/表格元素使用右對齊/左對齊。
when：有多行的文本元素
why：格式塔的相鄰原則，讓標簽與控件/內(nèi)容的關(guān)聯(lián)關(guān)系更加明確；對齊的邊緣讓視線的流動更加順暢。
how：標簽文字太長時考慮換行/上下布局的形式?？丶某叽缫矐撓嗷R。
對角平衡
what：用不對稱的方式來布置頁面，但通過將視覺重量放在左上角和右下角來保持頁面的平衡。
when：一屏顯示的頁面/彈窗，頂部有標題，底部有結(jié)束的按鈕。
why：讓畫面整體平衡；用戶的實現(xiàn)從左上角到右下角移動，符合習慣，也符合任務的順序；底部一般是用戶最后才做的活動。
how：不要將空白集中放置在某一邊，讓整體的重心更加均衡；將重要內(nèi)容放在左上角和右下角的連線中，將不重要的放在左下角和右上角。
屬性表
what：兩欄的表單式布局，展示對象的屬性，可編輯。
when：查看、編輯對象的屬性。
why：幫助用戶建立該對象的心智模型。
how：屬性進行分組、排序，符合某種邏輯（業(yè)務含義、首字母等）；屬性名稱使用用戶熟悉的術(shù)語；選擇合適的控件；及時保存或者提醒用戶保存；多個對象的展示可以使用圖標+懸浮提示的模式；空對象也需要表示，避免看起來像是沒有加載/出錯。
控件選擇參考：
響應式展開
what：界面的內(nèi)容隨用戶的操作而展示
when：多步驟的任務，在一個頁面內(nèi)完成
why：只展現(xiàn)當前有用的信息，讓用戶更加聚焦，心理壓力也更??；步驟之間的相關(guān)性比向?qū)Ｊ礁?；實現(xiàn)不同任務分支的分流。
響應式允許：一開始禁用，隨著用戶的操作、選擇等逐漸啟用，如注冊時信息不完整，注冊按鈕不用。
how：將所有信息放在同一個頁面，用戶可以隨時查看之前的步驟；往下展開新的內(nèi)容，而不是完全改變布局。
響應式允許
what：一開始展示所有頁面元素，但是禁用一部分，只有一部分可用，通過用戶的逐步操作來激活被禁區(qū)域。
when：具有分支的復雜任務、必須動作（填寫、執(zhí)行等）完整的任務。
why：防止用戶出錯，通過顯示屬性來引導、暗示用戶。
how：將禁止的元素放在可以使之生效的元素附近；順序上符合業(yè)務邏輯；告知用戶為什么有的元素會被禁止使用。
流式布局
what：跟進窗口的大小調(diào)整界面的元素和位置，讓頁面一直保持填滿的狀態(tài)。
when：頁面的顯示區(qū)域有可能會發(fā)生變化。
why：除非固定尺寸的設備界面，一般的web和移動端都需要考慮適配。
how：控件彈性、文字流式、圖片等比縮放。
適配規(guī)則參考：
iPhone 6 / 6 Plus 出現(xiàn)后，如何改進工作流以實現(xiàn)一份設計稿支持多個尺寸？ - 知乎
05-完成任務：動作和命令
動作的表現(xiàn)形式：按鈕、菜單、彈出菜單、下拉菜單、工具條、鏈接、動作面板、看不見的動作（快捷鍵、手勢、雙擊、拖拽、懸停、命令行輸入等）
模式
按鈕分組
what：將相關(guān)的動作組織成一組按鈕，彼此水平或垂直對齊。
when：多個按鈕，彼此之間有關(guān)聯(lián)。
why：讓界面具有自我描述的能力，在界面中形成一個整體。
how：按鈕組中的按鈕，針對的對象應該是一致的。而且，除非用戶需要，不要使用高深的術(shù)語。尺寸上應該保持一致。中間部分的使用頻次比兩端的使用頻次低一些，一般按照業(yè)務流程排序。
動作面板
what：將動作命令平鋪到一個面板上。
when：動作數(shù)量較多，按鈕分組不夠用。
why：用戶可以直接看到，操作上比較方便直接。按鈕形式上更加自由。一般是針對中央舞臺模式的對象進行操作。
how：動作面板的內(nèi)容可隨選擇對象的不同而動態(tài)變化。組織動作的形式：列表、樹、網(wǎng)格、可關(guān)閉的面板。動作的邏輯順序，按照業(yè)務邏輯或使用頻次。動作的標簽描述可以告訴用戶這些動作是干什么的。
突出“完成”按鈕
what：將完成一項任務的按鈕放在視覺流的末尾，加大它的尺寸并為它提供一個合適的標簽。
when：對于單個任務的完成，需要有一個結(jié)束的動作。
why：明確最后一步，讓用戶有一種完成目標、清理干凈的感覺。
how：讓按鈕文字容易被理解，使用動詞或動詞短語。位置上靠近最后一個輸入控件。視覺上進行突出顯示。
智能菜單項
what：動態(tài)改變菜單的標題，讓用戶使用之前就明確知道它的功能。如撤銷+剛才做的動作的名稱，讓用戶知道撤銷是針對的什么動作。
when：對于具體對象的操作，根據(jù)選擇對象的不同，彼此之間有細微的差別。
why：完善上下文語義，防止用戶出錯。
how：對于未選擇對象、單個對象、多個對象的情況下，語義描述都應該有所差別。
預覽
what：執(zhí)行動作之前，為用戶顯示執(zhí)行將會得到的結(jié)果。
when：用戶將要執(zhí)行一個“重量級”操作，一旦執(zhí)行將會有較高的成本（性能占用、金錢損耗、時間損耗等），如渲染、打印、濾鏡。
why：避免用戶產(chǎn)生無謂的損耗。應用具有自我描述性，讓不熟悉的用戶知道這個特定的動作是什么意思。
how：預覽狀態(tài)可直接進行下一步操作；讓用戶可以回退修改后再次預覽。
進度提示
what：在需要很長執(zhí)行時間的操作中，為用戶顯示該操作的進度。
when：長時間的進程，需要用戶等待。如程序安裝、下載等。
why：讓用戶知道當前的狀態(tài)，避免用戶誤認為程序出錯；讓用戶知道還需要等待多久，減少用戶的焦慮感。
how：告知用戶：當前正在做什么、已經(jīng)完成了多少、還剩多少、如何中途停止這項任務。保持一致的形式；確切的時間并不是必須的。
可取消性
what：提供某種快速取消一個耗費時間任務的操作，而沒有什么負面影響。
when：耗時較長的操作，且該操作關(guān)閉了其它很多交互，如ps打開一個大文件。
why：容錯，在用戶不小心操作的情況下可以讓他即時停止，從而鼓勵用戶安全探索。
how：取消按鈕靠近進度條，讓用戶易于發(fā)現(xiàn)。
多級撤銷
what：提供一種方式，讓用戶可以撤銷一系列操作。
when：交互流程比較復雜的情況，步驟較多。
why：讓用戶安全探索，分步撤銷可以減少時間上的浪費，也可以讓用戶嘗試不同的路徑、效果。
how：選擇對象、視圖尺寸改變、光標的位置、滾動條位置等操作無需撤銷，也無需記錄；撤銷的粒度不應該精確到修改的一個個字母級別，應該是整個修改一起撤銷；考慮到內(nèi)存占用等情況，多級撤銷應該有層級限制；考慮命令歷史列表或快捷鍵支持撤銷/重做。
命令歷史
what：將用戶的每一步操作記錄進行保存，包括操作名稱、操作對象、操作時間。
when：用戶需要執(zhí)行一系列冗長且復雜的操作。
why：用戶大量操作之后，可能想要重復之前的操作、會議之前的操作及順序、回退到其中某一步?；蛘叱鲇诎踩紤]、信息記錄等的要求需要保存。
how：操作命令的時間顯示是否需要；需要定義操作歷史的記錄長度/次數(shù)限制。可以展示多命令的列表，讓用戶自由回到任意一步，而不用逐級回退。已撤銷的和未撤銷的在命令列表中做出視覺區(qū)分。
宏
what：自定義一些操作為一個命令組。
when：用戶需要重復執(zhí)行一系列操作的時候，方便用戶復用。
why：提升效率，減少重復工作帶來無趣、錯誤，讓用戶將精力放在更重要的任務上。
how：為用戶提供某種方式來增刪改查各個宏，可以自定義命名，方便后續(xù)調(diào)用。
06-顯示復雜數(shù)據(jù)：樹、表格及其它信息圖表
良好的交互式信息圖形為用戶提供下面這些問題的答案：
1、數(shù)據(jù)是如何組織的？數(shù)據(jù)的信息結(jié)構(gòu)
2、它們之間的關(guān)系如何？多個數(shù)據(jù)之間的關(guān)系是并列、遞進、對比、哪些是同一組等。傳達信息的形式包括顏色、位置和對齊、方向、大小、底紋、形狀等。?
3、我能怎樣進一步了解這些數(shù)據(jù)？平移、縮放、點擊等，查看細節(jié)或其他維度。
4、我能重新組織這些數(shù)據(jù)來換一種方式看待它嗎？排序規(guī)則自定義（字母、數(shù)字、數(shù)值、日期/時間、物理地點、類別/標記、受歡迎程度、完全隨機等），看出不同的趨勢。
5、只要把我想知道的數(shù)據(jù)顯示給我就行了。顯示關(guān)鍵信息，讓用戶可以切換/自動切換查看，而不是將所有信息一次性揉在一起?？梢运阉?、過濾。將相關(guān)數(shù)據(jù)放到一起，方便對比查看。
6、具體的數(shù)據(jù)值是多少？圖例、坐標軸、數(shù)據(jù)標簽、懸浮提示、篩選出某種范圍的數(shù)據(jù)等。
模式
總覽加細節(jié)
what：在放大的詳細視圖旁邊放置一個總覽圖?？傆[圖中顯示當前詳情在整體中的位置。
when：圖片或地圖集成了大量的信息，既能看到部分細節(jié)，又能在整體中保持方向感。
why：用戶在整體中穿梭轉(zhuǎn)換以及不同區(qū)域的對照、跳轉(zhuǎn)等比較便捷。
how：在總視圖上，把當前的視野顯示出來，讓視野框可以隨鼠標移動。細節(jié)縮放時，視野框產(chǎn)生變化，總覽圖的大小不變。
數(shù)據(jù)提示
what：鼠標懸浮時，顯示細節(jié)信息。
when：數(shù)據(jù)顯示整體的狀況，鼠標懸浮時顯示詳情。如地圖上街道的名字、柱狀圖上柱子的數(shù)值。
why：在總體視圖中顯示所有詳情，會干擾用戶的注意力，也會顯得沒有重點。
how：一般用于web端，移動端沒有懸浮操作。顯示的數(shù)據(jù)應該與對象保持某種關(guān)聯(lián)，如位置靠近、指示箭頭等。
動態(tài)查詢
what：提供過濾條件，讓用戶篩選出某種范圍的數(shù)據(jù)。
when：包含的數(shù)據(jù)量較大，用戶需要找尋滿足某些條件的數(shù)據(jù)。
why：即時反饋，鼓勵用戶探索數(shù)據(jù)；讓用戶通過篩選條件的范圍值來了解全部數(shù)據(jù)的范圍。
how：篩選的條件與數(shù)據(jù)自身的維度密切相關(guān)，控件的選擇與數(shù)據(jù)篩選的形式密切相關(guān)。
數(shù)據(jù)刷
what：讓用戶在一個視圖里選擇數(shù)據(jù)，然后在另一個視圖里顯示選中的數(shù)據(jù)。同一組數(shù)據(jù)用兩種維度來展現(xiàn)，在一個中選擇部分數(shù)據(jù)，在另一個中突出這些數(shù)據(jù)。
when：需要不同維度的對比查看。
why：將多個不同維度的視圖進行關(guān)聯(lián)，讓用戶對數(shù)據(jù)有更加深入的了解。
how：選擇的方式可以使鼠標畫框、點選、套索、shift/control多選等。選中的數(shù)據(jù)在不同的視圖中，使用相同的顏色或形式突出顯示，增加關(guān)聯(lián)關(guān)系。
局部縮放
what：一次展示全部數(shù)據(jù)，在鼠標操作（懸浮、點擊等）時，放大某一塊，顯示詳細信息。
when：地圖、圖形、網(wǎng)格等，用戶可以看到全貌，但是不需要看到所有細節(jié)。類似于總覽+細節(jié)的模式。
why：常規(guī)的細節(jié)跳轉(zhuǎn)、縮放會失去上下文，局部縮放讓用戶在查看細節(jié)的時候，還能保留數(shù)據(jù)在整個數(shù)據(jù)集中的上下文信息。
how：在不同焦點間移動的時候過渡平滑；放大過程中的頁面抖動不可太劇烈。
斑馬行
what：表格中使用類似但顏色不同的背景來區(qū)分不同行。
when：表格有多列，行與行之間的區(qū)分比較困難。
why：格式塔的連續(xù)性、封閉性原理。
how：背景不要干擾正常的數(shù)據(jù)顯示。
可排序的表格
what：用戶可以對表格內(nèi)容自定義排序。
when：表格有多列，用戶需要按不同的順序查看。如篩選商品時按價格、按銷量等不同方式。
why：用戶可以自由探索，更優(yōu)控制感。
how：在表頭出增加點擊可排序的按鈕或提示。明確哪些列可以用來排序。
跳轉(zhuǎn)到對象
what：當用戶輸入某個對象的名稱時，直接跳轉(zhuǎn)到該對象并選中它。
when：對象數(shù)量較多，用戶想要快速準確的選中其中某個字段。
why：人們不擅長在過長的列表中掃描定位信息。
how：持續(xù)過濾，當滿足條件的結(jié)果有多個時，通過tab可以切換到下一個。
新對象行
what：在表格的最下方新增一行來創(chuàng)建新的對象。
when：用戶需要在列表中新增一個對象，對象的創(chuàng)建過程并不復雜，只需要簡單的選擇或輸入。
why：對象創(chuàng)建后的顯示位置與創(chuàng)建時的位置保持一致，界面簡潔、跳轉(zhuǎn)更少。
how：一般可以讓用戶選擇在哪里插入行的一行/一列；用戶新增后，按已有格式新增一個空對象，用戶可以修改、編輯值。
級聯(lián)列表
what：分層展示信息，選中上一層后，展示下一層的信息。類似于雙面板選擇器模式。
when：樹形結(jié)構(gòu)的數(shù)據(jù)，層級比較深。
why：每一層看到的信息有限，用戶可以看到每一層的信息，對于對象處于整個結(jié)構(gòu)中的位置也有很好的了解。
how：葉子節(jié)點可能會顯示屬性之類的詳情；顯示的形式不一定是文字，有可能是圖標/圖標+文字。
樹狀表格
what：層級結(jié)構(gòu)的數(shù)據(jù)，展開后的下一層縮進一部分。縮進越多，層級越深。
when：多層級結(jié)構(gòu)的數(shù)據(jù)。
why：在一個統(tǒng)一的結(jié)構(gòu)里顯示該對象的層級結(jié)構(gòu)。
how：可以用多列 的形式在顯示每一行不同維度的信息。
多Y值圖表
what：共享X軸，多個圖從上到下累積，用不同的Y軸。
when：同樣的維度，不同指標的數(shù)據(jù)。
why：同一個X軸可以告訴用戶數(shù)據(jù)之間的關(guān)系，讓用戶在圖與圖之間對比查看。
how：相互之間區(qū)分明確，減少干擾。
大量小對象
what：將幾個維度的信息圖表平鋪，如按照日歷的方式放到一起，使用日歷坐標系。
when：在一個圖中顯示兩個以上維度的大量數(shù)據(jù)。
why：多個對象放到一起，對于多個對象、多維度之間的比較、變化趨勢會有直觀的了解，如將天空顏色的圖片放到日歷中，看一段時間內(nèi)的空氣質(zhì)量好壞。
how：減少沒有意義的視覺差別，讓不同對象之間在非關(guān)鍵信息上保持一致。數(shù)量較多時考慮分區(qū)間展示、按照某種特定的順序（如時間、數(shù)量大?。┑蕊@示。
樹狀地圖
what：矩形樹圖，用不同大小的矩形來表示多維數(shù)據(jù)或?qū)蛹壗Y(jié)構(gòu)的數(shù)據(jù)。
when：數(shù)據(jù)有多個維度的屬性。
why：利用位置、大小、色彩、包含關(guān)系等將數(shù)據(jù)打包到同一個空間，鼓勵人們找出各個數(shù)據(jù)之間的關(guān)系、趨勢和一些特別的數(shù)據(jù)點。
how：矩形的大小與某種變量相關(guān)；通過矩形之間的嵌套來表達數(shù)據(jù)的層級結(jié)構(gòu)；可以使用顏色、位置來表示其他維度的信息。
07-從用戶獲得輸入：表單和控件
表單設計的原則：確定用戶知道要回答的問題是什么，以及為什么需要回答這些問題；
如果可以，根本不要問什么問題；
不要依賴于用戶的記憶力，電腦的保存能力比人腦更好；
多提醒用戶（默認值、占位符、結(jié)構(gòu)化格式、輸入提示）
進行可用性測試；
控件會影響用戶對所問內(nèi)容的期望。
控件的選擇要考慮：可供使用的空間；用戶的使用經(jīng)驗；用戶的領(lǐng)域經(jīng)驗；通用的形式；可用的技術(shù)。
模式
容錯格式
what：不限定用戶輸入的格式，后臺處理成標準格式，如電話號碼單獨輸入，155-1111-1111、155-111-1111、1551111111等都可以。
when：請求用戶輸入數(shù)據(jù)時，用戶可能會大小寫混用、縮寫等。
why：簡化用戶的輸入操作，讓用戶輸入更簡單。
how：考慮用戶看的輸入形式；將格式化后的文本顯示給用戶，讓其查看是否有誤。
結(jié)構(gòu)化的格式
what：使用格式化的文本框來反映所請求數(shù)據(jù)的格式。
when：數(shù)據(jù)格式固定，且用戶對該格式比較熟悉，你不希望任何用戶違背你所期望的格式。
why：分隔成不同的組合，讓用戶檢查、比對更加容易。（如序列號的輸入）
how：輸入框的長度反映字符的長度；前一個框?qū)憹M后，光標自動切換到下一個框。
填空
what：將一個或多個數(shù)據(jù)字段，組合成句子的形式，用戶的輸入過程，就是在完成一句話，予以更明確，更容易理解。
when：通過前后的選擇與標簽來解釋需要輸入的是什么，以及輸入完畢后將會進行的動作。
why：讓界面變得更加自我說明。
how：標簽描述與輸入控件對齊；對于國際化的翻譯要更加準確。
輸入提示
what：舉例說明需要輸入的是什么樣的數(shù)據(jù)。
when：輸入要求/標簽用戶不太熟悉。
why：讓標簽更簡短、專業(yè)，同時又減少用戶的困惑。
how：tooltips可以減少空間占用，但是需要用戶主動操作；提示文字也不應該過分醒目，減少視覺干擾。
輸入提醒
what：占位符提示用戶該怎么做/輸入。
when：不能提供默認值的場景。
why：讓界面不言自明。
how：選擇合適的提醒文字，動賓短語。
自動完成
what：在用戶輸入過程中，猜測可能的答案，并在合適的時候自動把答案寫到輸入框里。
when：輸入的內(nèi)容很長，如網(wǎng)址，用戶難以輸入或難以記住。
why：減少輸入工作量，顯得很貼心；防錯。
how：讓用戶可以選擇是否采用提示的答案；不要干擾正常的輸入。
下拉選擇器
what：在彈出的面板中展示選項。
when：備選項較多（>7），讓用戶從集合中選擇。
why：最初的展示空間較小，但是可以完成復雜的選擇。
how：減少彈出面板中的滾動。
圖示選項
what：通過縮略圖、圖標等形式，而非文字來顯示可選項。
when：選擇的對象為顏色、圖片等。
why：更加直觀，減少用戶的人致復旦，用戶不用將文字在腦海中轉(zhuǎn)換成對應的圖片/色彩。
how：顯示出最主要的區(qū)別，可以考慮加上文字輔助說明。
列表建造器
what：穿梭框，將備選和已選分兩個部分展示。
when：被選項較多，可能需要復選多個，選中后備選項減少，讓選擇更加容易。
why：讓用戶明確知道備選項中，那些選中哪些沒選。
how：源列表放左邊，目的列表放右邊；可以新增、刪除、排序；可多選（shift/control）、拖拽會提高易用性，可拖拽的話要給出功能提示，暗示用戶。
良好的默認值
what：與西安為用戶填入他們看想要填入的值。
when：減少用戶需要做的操作，大多數(shù)情況下，用戶只需要確認就行。敏感信息避免默認，不要違反數(shù)據(jù)保護條例。
why：減少用戶輸入；提供需要輸入的數(shù)據(jù)示例。
how：叫大部分用戶在絕大部分情況下，不會改變默認值的時候才使用。
錯誤顯示在同一頁
what：錯誤信息與出錯的位置關(guān)聯(lián)，讓人知道是哪里出錯了。
when：錯誤反饋的提示。
why：讓用戶意識到出錯的位置，并知道該如何解決。
how：錯誤反饋的要點：讓用戶注意到；告知出錯原因；告知出錯位置；提供解決方案。按照谷歌的原則，可以歸納為：簡潔、清晰、有效。
08-Builder和編輯器
對文本、布局、格式、圖像、矢量圖形等進行編輯的應用。所見即所得的模式，讓用戶可以直接看到編輯后呈現(xiàn)的下過，也可以對對象直接操作，選擇對象的方式包括單擊、雙擊、三擊、框選、shift/control多選等。
模式
就地編輯
what：使用動態(tài)文本編輯器，讓用戶可以在顯示文本的地方直接編輯。
when：用戶想要改變文本文字。
why：顯示和編輯不在一個地方，會分散用戶的注意力，增加頁面認知的復雜度。
how：區(qū)分編輯狀態(tài)和顯示狀態(tài)；編輯時的位置和顯示時的位置保持一致。
智能選擇
what：軟件自動選擇相關(guān)對象，而不是讓用戶去選擇。
when：需要選擇多個對象的時候。
why：減少用戶的操作，讓用戶和計算機各自做自己擅長的事情。
how：使用某個特定工具，如“魔棒”，或者某種特定操作（如shift+單擊、三擊）等來觸發(fā)。
組合選擇
what：使用不同的方式、選擇位置等，來決定選擇組合時選擇對象還是選擇組合；框選是選擇內(nèi)部的還是接觸到的。
when：選擇組合或者組合內(nèi)的對象。
why：讓用戶知道如何選擇組、如何選擇對象，方便快速選擇。
how：提供視覺線索告知用戶是選中了單個對象還是選中了組合；
一次性模態(tài)
what：當一個模態(tài)打開后，執(zhí)行一次操作，然后自動切換回默認模態(tài)或前一個模態(tài)。
when：用戶不會重復待在這個模態(tài)里，如新建對象模態(tài)，新建完以后就回到選擇模式。
why：流程更加流暢，不用用戶手動點擊切換。
how：確定用戶只需操作一次；通過按鍵（如shift）來保持這個狀態(tài)。
彈性加載模態(tài)
what：讓用戶通過某個按鍵或鼠標按鈕來進入某種模態(tài)，如按住shift可多選。當用戶松開時，離開這個模態(tài)并回到之前的模態(tài)。
when：用戶對這個功能的使用頻率較高，愿意付出學習成本。
why：通過光標來提示用戶處于某種模態(tài)（如鼠標變?yōu)槭中危?，用戶不用那個頻繁通過工具條來切換模態(tài)，有助于快速完成操作。
how：提供通過菜單進入模態(tài)的方法，也提供按下鍵盤等快捷方式。
強制調(diào)整大小
what：調(diào)整大小時，可以選擇固定比例或隨意縮放。
when：對圖片、圖形等進行變化的時候。
why：節(jié)約用戶的操作時間。
how：提供變化框，顯示中心、句柄等，顯示變化框的時候為編輯模式。
磁性吸附
what：讓對象與它附近的對象自動貼在一起。
when：用戶需要將對象放在精確的位置
why：讓鼠標的有效區(qū)域變大，不用一定要手動調(diào)整到一起，操作上更加便捷。
how：當用戶把對象拖到另一個對象的邊緣時，讓它自動貼近那個對象。
對齊指示線
what：提供水平、豎直方向的參考線，幫助用戶對齊各個對象。
when：用戶需要讓各個對象之間精確對齊。
why：參考線+磁性吸附，讓用戶操作更便捷；多人協(xié)作時，可以傳遞布局和位置信息。
how：讓用戶自由創(chuàng)建參考線，也可以直接刪除；不影響當前的文檔內(nèi)容；可以讓對象磁性吸附到參考線上；考慮顯示智能參考線，在移動的時候顯示，不操作的時候隱藏。
粘貼變種
what：除標準的粘貼之外，提供不同格式的選項。
when：用戶需要選擇包括內(nèi)容、格式等一種或多種結(jié)合的粘貼情況。
why：用戶可以自由選擇，減少粘貼后的編輯工作。
how：粘貼的時候使用默認模式，并同時提供其它方式的選擇。
09-修飾外觀：視覺風格和美感
根據(jù)內(nèi)容來確定風格；視覺風格的影響因素包括：布局、顏色、圖片、輔助元素、字體、空間和留白、光影、質(zhì)感、陰影、紋理等。
模式
深色背景
what：圖片或有色背景，拉開與前景元素的層次。
when：區(qū)分層次，聚焦于內(nèi)容。
why：沉浸感，內(nèi)容更突出；長時間看起來眼睛更舒服。
how：不要讓背景干擾前景內(nèi)容，區(qū)分前后層級。
少一點色彩，多一些價值
what：減少頁面中使用的顏色種類。
when：頁面設計的基本原則。
why：太多的顏色會顯得很雜亂、花哨，會對用戶的注意力形成競爭。
how：減少有彩色的種類，更多地使用無彩色；冷暖調(diào)和。
角落處理
what：圓角拉近與人的距離，直角更冷漠，與人有距離感，更高級。
when：按鈕、邊框等角落的處理。
why：使用圓角、直角的方式來強化整個頁面的氣質(zhì)方向。
how：使用同樣的圓角大小可以保持風格的一致性，不要混用。
邊界回應字體
what：邊框、描邊的粗細以及圓角的風格等與字體的粗細、風格保持一致。
when：頁面設計中有邊框、按鈕、文字等多種元素混用的時候。
why：各種元素統(tǒng)一化風格，讓頁面的整體風格更加明確，有助于整體的一致性。
how：各種細節(jié)、元素的風格要相互協(xié)調(diào)、一致。
發(fā)絲
what：使用細線作為分隔。
when：需要區(qū)分內(nèi)容的時候。
why：區(qū)塊的整體感更強，視覺上更精致。
how：將同一組的內(nèi)容歸納到一起，形成大模塊-小模塊-細節(jié)的層次瀏覽。
粗細字體對比
what：通過字重、字號、顏色、字間距、行間距等來區(qū)分不同的層級。
when：突出主要內(nèi)容，強化層次感。
why：讓頁面更有節(jié)奏感，不會顯得單調(diào)；內(nèi)容的組織結(jié)構(gòu)具有自明性，有助于用戶更好理解。
how：區(qū)分層級、區(qū)分不同的狀態(tài)（選中與常規(guī)）、區(qū)分是否可交互。
皮膚
what：用戶可以自定義外觀風格。
when：用戶需要個性化的定制；希望或者用戶本身就會長時間使用的應用。
why：讓用戶形成一對一的專屬感；增加用戶粘性。
how：支持一鍵切換或者可以更加細化的添加裝飾等。
文章結(jié)構(gòu)
