前幾天看了《界面設(shè)計(jì)模式》這本書，英文：Designing Interfaces: Patterns for Effective Interaction Design， 作者：Jenifer Tidwell，是美國(guó)的一位交互設(shè)計(jì)、信息架構(gòu)和設(shè)計(jì)前期分析方面的咨詢師和作家。
豆瓣地址：https://book.douban.com/subject/25716088/
一點(diǎn)心得體會(huì)
這是一本強(qiáng)大的關(guān)于網(wǎng)頁界面設(shè)計(jì)模式的介紹，特別適合初中階設(shè)計(jì)師的學(xué)習(xí)。
整本書主次分明、條理清晰，每類模式組都按照理論基礎(chǔ)、模式應(yīng)用兩個(gè)主要方面來闡述。對(duì)于進(jìn)行PC端的網(wǎng)頁、軟件方面的設(shè)計(jì)師有重要的借鑒指導(dǎo)意義，可以為我們提供很多常見的解決方案。比如，當(dāng)你在設(shè)計(jì)一個(gè)信息復(fù)雜、流程繁瑣的企業(yè)級(jí)網(wǎng)頁端產(chǎn)品時(shí)，對(duì)于如何組織頁面信息的問題，就可以參考書中提到的布局模式，像 帶標(biāo)題的區(qū)域Titled Sections，手風(fēng)琴 Accordion等模式。
另外，也可以幫助設(shè)計(jì)師建立自己產(chǎn)品的設(shè)計(jì)規(guī)范。書中的每一個(gè)模式都分成（1）它是什么；（2）什么時(shí)候使用；（3）為什么使用；（4）如何使用；（5）應(yīng)用實(shí)例 五個(gè)方面來介紹，通俗易懂，方面了解每一個(gè)模式的來龍去脈。只要再稍加工一下，結(jié)合實(shí)際的產(chǎn)品，就可以成為一款產(chǎn)品的設(shè)計(jì)規(guī)范。
然而，缺點(diǎn)是書中的例子有些過時(shí)了，而對(duì)于想要拓展自身思維的高階設(shè)計(jì)師可能覺得不夠用，但是它仍不失為一本隨時(shí)放在手邊的工具書。
一、人與界面
在提到模式前，首先要講一下人與界面。
人們?yōu)槭裁匆密浖?/p>
軟件對(duì)于使用它們的人來說，只是達(dá)到目的的一種手段，你越能幫助他們達(dá)到那些目的，他們就越高興。
而在人們使用一個(gè)應(yīng)用或數(shù)字產(chǎn)品的過程中，他們是在和機(jī)器展開一場(chǎng)對(duì)話。用戶界面是這場(chǎng)對(duì)話的中介，幫助用戶達(dá)到任何ta意想中的目標(biāo)。
而設(shè)計(jì)師的工作就是為這場(chǎng)對(duì)話編寫腳本，定義詞匯。這就需要設(shè)計(jì)師既了解人，又懂界面，只有這樣，才能做好中介的角色
關(guān)于人：需要了解他們動(dòng)機(jī)和意圖，他們希望使用的詞匯、圖標(biāo)和應(yīng)用姿態(tài)等。
關(guān)于界面：平臺(tái)、實(shí)現(xiàn)方式，以及可提供的模式。
1.1 軟件只是達(dá)到某種目的的手段
用戶只會(huì)和你談?wù)撍麄兿胍墓δ芎徒鉀Q方案，而不是真正需要和存在的問題。而我們?cè)O(shè)計(jì)界面的第一步是找出用戶真正要達(dá)到的目標(biāo)。如用戶填寫一張表格，其真實(shí)目標(biāo)可能是想要在線購物。
所以不要熱衷于設(shè)計(jì)那張表格，如果有某種方法可以很快完成任務(wù)，同時(shí)用戶完全不必用到那張表格，那就把它整個(gè)去掉。
1.2 用戶研究基礎(chǔ)知識(shí)
每個(gè)人都是獨(dú)一無二的，要找出對(duì)用戶來說普遍的情況。也就是找到相當(dāng)多的單個(gè)用戶來把個(gè)別的個(gè)人癖好和公共的行為模式區(qū)分開來。我們需要學(xué)習(xí)他們的目標(biāo)、任務(wù)、語言詞匯、技術(shù)水平、態(tài)度及影響。研究方法：
直接觀察
案例研究
調(diào)查問卷
任務(wù)角色
1.3?用戶的學(xué)習(xí)動(dòng)機(jī)
當(dāng)你同別人就某個(gè)主題展開對(duì)話時(shí)，你會(huì)根據(jù)自己對(duì)對(duì)方的了解來調(diào)整要說的內(nèi)容。同理，在界面上使用的主題相關(guān)詞匯，應(yīng)該和用戶的知識(shí)水平相當(dāng)；他們的技術(shù)水平如何；是否感興趣。
一個(gè)根本問題：用戶愿意花多大的努力來學(xué)習(xí)使用你的界面。用戶分類有：
每天都使用
偶爾會(huì)使用
介于兩者之間
1.4_人的模式
描述人的行為14種的模式。
安全探索 safe Exploration：允許用戶在界面探索而不會(huì)產(chǎn)生可怕的后果，支持撤銷
即時(shí)滿足 instant Gratification：立刻看到結(jié)果，在最初幾秒看到成功的體驗(yàn)
滿意即可Satisficing：Satisfying + Sufficing 快速掃描，夠用而不是最佳
中途變卦 Changes in Midstream ：使用界面途中改變目標(biāo)，設(shè)計(jì)時(shí)為人們中途變卦提供機(jī)會(huì)。
延后選擇 Deferred Choices：來自人們即時(shí)滿足的愿望
遞增構(gòu)建 Incremental Construction：從小片斷開始，支持快速的變化和保存。可能引發(fā)用戶的“心流”
習(xí)慣 Habituation：可提高效率，也可產(chǎn)生破壞性的后果。保持應(yīng)用之間和應(yīng)用內(nèi)的一致性。
小片時(shí)間 Microbreaks：讓一個(gè)活動(dòng)能夠很容易而且能快速獲得。
空間記憶 Spatial Memory：人們通過回憶東西的位置來找到它們，而不是名字。和習(xí)慣一樣，在類似的地方找到類似的功能。
前瞻記憶 Prospective Memory：設(shè)置一些提示來提醒自己不久將來要完成某事。讓用戶自己用工具去創(chuàng)建他們的提示系統(tǒng)。有被動(dòng)和主動(dòng)，主動(dòng)如自動(dòng)保存填寫的數(shù)據(jù)。
簡(jiǎn)化復(fù)雜工作 Streamlined Repetition：為用戶提供某種簡(jiǎn)單的完成重復(fù)任務(wù)的方式。
只支持鍵盤 Keyboard Only：數(shù)據(jù)輸入的速度
旁人建議 Other People’s Advice：他人的想法會(huì)影響我們。
個(gè)性化推薦 Personal Recommendations：個(gè)人之間的共享，分享。
二、設(shè)計(jì)模式
模式意味著重用，好的模式建立在人與事物的深刻認(rèn)知上。
在第一步中，我們知道了用戶目標(biāo)
下一步，要思考：我們需要給用戶展示哪些內(nèi)容？它們應(yīng)該怎么樣組織和排序？用戶需要對(duì)它們進(jìn)行什么操作？從抽象層次考慮，你能設(shè)計(jì)出多少種方式來展現(xiàn)這些內(nèi)容和任務(wù)？
1、總述：
以下將從組織、導(dǎo)航、布局、列表、操作、數(shù)據(jù)、表單控件、社交媒體、移動(dòng)設(shè)計(jì)和視覺美感10個(gè)方面來展開模式介紹。
每一個(gè)方面都會(huì)先介紹理論知識(shí)，再詳細(xì)說明對(duì)應(yīng)的設(shè)計(jì)模式。
每一個(gè)模式都包括"What", "Use When", "Why", "How", and “Examples”這5個(gè)方面來介紹
2、組織內(nèi)容：信息架構(gòu)和應(yīng)用結(jié)構(gòu)
信息架構(gòu)是對(duì)信息空間進(jìn)行組織的藝術(shù)。包括很多方面：展示、搜索、瀏覽、打上標(biāo)簽、分組、排序、操作，以及有策略地隱藏部分信息。
3、到處走走，導(dǎo)航、路標(biāo)和找路
最好的旅途就是沒有旅途，需要的東西就在手邊 ，不用跑來跑去。
關(guān)于導(dǎo)航的各部分內(nèi)容：總體結(jié)構(gòu)或總的導(dǎo)航模型，怎樣知道你的當(dāng)前位置，怎樣找出你的目的地，然后如何快速到達(dá)那里。
4、組織頁面：頁面元素和布局
頁面布局是一種藝術(shù)，它通過操縱用戶在頁面上的注意力來完成對(duì)含義、順序和交互發(fā)生點(diǎn)的傳達(dá)。
布局的理論知識(shí)點(diǎn)有：視覺層次結(jié)構(gòu)、視覺流、注意力焦點(diǎn)、分組、對(duì)齊和格式塔原則。
其中，視覺流可以用來在讀者掃描頁面的時(shí)候跟蹤讀者的視線。焦點(diǎn)就是頁面上那些你的眼睛沒法抵制的地方。
設(shè)計(jì)良好的視覺層次應(yīng)該在頁面上建立許多焦點(diǎn)，把注意力吸引到最重要元素的地方，讓視覺流把視線從這些焦點(diǎn)引導(dǎo)到那些重要程度次之的信息上。
作為設(shè)計(jì)師，應(yīng)該能控制頁面上的視覺流，讓人們能夠按照正確的次序沿著它向前流動(dòng)。一般人的閱讀習(xí)慣是從上到下，從左到右。
5、列表
如何交互式顯示含有眾多條目的列表，每一種適度復(fù)雜的界面或網(wǎng)站設(shè)計(jì)都包括了列表。
進(jìn)入設(shè)計(jì)之前，需分析：用戶將如何使用列表？將應(yīng)用哪個(gè)使用場(chǎng)景？列表的最突出的非可視化特征是什么？
另外還要回根據(jù)需求提供對(duì)應(yīng)解決方案，如：當(dāng)用戶從列表中選擇一項(xiàng)時(shí)，應(yīng)該如何顯示該項(xiàng)的細(xì)節(jié)信息。方案有：1、雙面板選擇器；2、列表嵌入；3、單窗口深入。
6、完成任務(wù)：動(dòng)作與命令
按鈕和菜單，我們的目標(biāo)是讓合適的動(dòng)作處于可用狀態(tài)，為它們提供適當(dāng)?shù)臉?biāo)簽，讓它們?nèi)菀渍业?，并支持?dòng)作序列。以及還有一些不可見的動(dòng)作。
7、顯示復(fù)雜數(shù)據(jù)：樹、表格及其它信息圖形
信息圖形-包括地圖、表格和圖表等，以可視化的方式而不是文字的方式傳達(dá)知識(shí)。本模式介紹在交互式信息圖表上好玩的創(chuàng)新。
一些可視化特征是前攝的：在用戶有意識(shí)地注意它們之前，它們就已經(jīng)開始在傳達(dá)信息了。
8、獲取用戶輸入：表單與控件
所謂表單，就是一些問題／答案配對(duì)，以下介紹應(yīng)用在表單上的模式、技巧和控件。
9、利用社交媒體
利用社交媒體提升品牌、分享理念、傳播視頻或其它藝術(shù)表現(xiàn)形式，甚至是支持你的特定業(yè)務(wù)。
10、邁向移動(dòng)設(shè)計(jì)
移動(dòng)設(shè)計(jì)的特征，以及移動(dòng)設(shè)計(jì)的方法。
11、修飾外觀：視覺風(fēng)格和美感
研究表明：什么因素讓人們對(duì)網(wǎng)站產(chǎn)生信任或不信任，排在第一的是網(wǎng)站的外觀。
