PPT:
介面設(shè)計 （Interface Design）
接口設(shè)計 不僅適用于 ? 網(wǎng)頁設(shè)計?還適用于….
Web App 和 Native App悲关，哪個是趨勢？(知乎)
Native App
Web App
采用HTML5實(shí)現(xiàn)了接近Native的體驗(yàn)效果
"按設(shè)計"
既然物體不能為自己說話, 就必須讓它們做得看起來像是啥，做啥
—拉爾夫．卡普蘭 Ralph Caplan,
今日（前題）
網(wǎng)絡(luò)技術(shù)框架平臺, 提供和支持的東西遠(yuǎn)遠(yuǎn)超過基本的鏈接和基于表單的交互
傳統(tǒng)原生應(yīng)用程序（native APP）專有的功能，現(xiàn)在都可以在瀏覽器中進(jìn)行
復(fù)雜介面的新力量意謂著新技能新職位的產(chǎn)生：交互設(shè)計（interaction design）
本周內(nèi)容
7.1 為媒介而設(shè)計 designing for the medium p.207
7.2 導(dǎo)航和找路 navigation and wayfinding p.214
7.3 交互 interaction p.230
7.4 信息設(shè)計 information design p.244
7.5 移動界面設(shè)計 mobile interface design p.247
7.6 企業(yè)界面設(shè)計 enterprise interface design p.251
資深產(chǎn)品經(jīng)理，接口設(shè)計工具熟練
7.1 為媒介而設(shè)計 designing for the medium p.207
無死胡同頁 NO DEAD-END PAGES
直接訪問 DIRECT ACCESS
簡潔性和一致性 SIMPLICITY AND CONSISTENCY
完整性和穩(wěn)定性 INTEGRITY AND STABILITY
反饋和對話框 FEEDBACK AND DIALOG
帶寬和交互 BANDWIDTH AND INTERACTION
顯示屏 DISPLAYS
用戶可能出現(xiàn)在任何頁面上
如果您的小節(jié)頁不包含指向主頁或本地菜單頁的鏈接, 則用戶將被鎖定在網(wǎng)站的其余部分班巩，而連不到其他頁面 (見圖 7.1)。
用戶進(jìn)入站點(diǎn)時可能在任何頁面上，因而需要即時提示训裆，展示站點(diǎn)標(biāo)識和 "您在這里" 標(biāo)記。
無死胡同頁
請確保網(wǎng)站中的所有網(wǎng)頁至少有一個返回主頁的鏈接, 或者更好的是冷蚂，提供主頁鏈接以及指向網(wǎng)站其他主要部分的鏈接缭保。除了用戶界面的考量外, 這些鏈接對于搜索引擎的可見性至關(guān)重要。
網(wǎng)頁內(nèi)容管理系統(tǒng) (如WordPress 和 Drupal) 提供了一個圖形界面, 允許您在不需要了解 HTML 標(biāo)記語言的情況下快速向頁面添加文本和圖形蝙茶。
直接訪問 DIRECT ACCESS
用戶希望以盡可能最少的步驟獲取信息艺骂。這意味著您必須設(shè)計一個有效的信息層次結(jié)構(gòu)，以便用戶通過菜單頁找到頁面所需的點(diǎn)擊步驟數(shù)最小化隆夯。研究表明钳恕，用戶喜歡至少提供有5到7個鏈接的菜單别伏，用戶們喜歡幾頁精心組織的選擇項(xiàng)目，而不喜歡層次過多的過度簡化菜單忧额。得設(shè)計您的網(wǎng)站層次結(jié)構(gòu), 以便真正的內(nèi)容從網(wǎng)站的主菜單頁面厘肮，只需一次或兩次點(diǎn)擊就可達(dá)。
注意! 核心概念
Access - Accessibility
W3C 標(biāo)準(zhǔn)翻譯
accessibility
p.375
可訪問性睦番，
（信息）無障礙/?親和力 [港臺]
Ｗ３Ｃ 翻譯
WAI-ARIA（可訪問富互聯(lián)網(wǎng)應(yīng)用）wai-aria (Accessible Rich Internet Applications）
WCAG（Web內(nèi)容無障礙指南）Web Content Accessibility Guidelines (WCAG) 2.0
簡潔性和一致性 ?SIMPLICITY AND CONSISTENCY
圖 7.2
拉帕姆的季刊” Lapham’s Quarterly 使用古典美學(xué)（居中設(shè)計类茂，低調(diào)但精致的排版，一個不顯眼的界面)來產(chǎn)生一個安靜的丶但功能性高的網(wǎng)站標(biāo)識和主標(biāo)題導(dǎo)航托嚣。有趣的是, 保守的字型丶排版和圖像是安裝在一個高度敏感的移動優(yōu)先的現(xiàn)代設(shè)計框架巩检，該框架於2014下半年推出。
完整性和穩(wěn)定性 INTEGRITY AND STABILITY
反饋和對話框 ?FEEDBACK AND DIALOG
通過圖形設(shè)計丶導(dǎo)航鏈接丶和統(tǒng)一放置的超文本鏈接您的網(wǎng)頁設(shè)計示启，應(yīng)提供持續(xù)的視覺和功能確認(rèn)用戶的行蹤和選項(xiàng)兢哭。反饋也意味著準(zhǔn)備回應(yīng)用戶的詢問和評論。設(shè)計良好的網(wǎng)站提供直接的鏈接供用戶連系網(wǎng)站編輯或網(wǎng)站管理員夫嗓。規(guī)劃與您的站點(diǎn)的用戶進(jìn)行這種持續(xù)的關(guān)系對于企業(yè)的長期成功至關(guān)重要
帶寬和交互 ?BANDWIDTH AND INTERACTION
圖 7.5 "第三世界" 地區(qū)的移動網(wǎng)絡(luò)用戶是目前網(wǎng)絡(luò)受眾中增長最快的部分迟螺。
帶寬和交互 ?BANDWIDTH AND INTERACTION
用戶不會容忍長時間的延遲。研究表明舍咖，對于大多數(shù)計算任務(wù)矩父，超過大約是十秒的門檻，用戶感到挫折谎仲。
請檢查您的網(wǎng)站日志, 以確保您對典型用戶和地理位置和網(wǎng)絡(luò)連接有所了解浙垫。如果您有許多國際用戶，舉例來說郑诺，在頁面上大型圖形的使用應(yīng)更保守一些 (圖 7.4)夹姥。
監(jiān)視任何網(wǎng)站的可用性和響應(yīng)能力
https://docs.microsoft.com/zh-CN/azure/application-insights/app-insights-monitor-web-app-availability
Web availability tests
https://www.uptrends.com/tools/uptime
顯示屏 DISPLAYS
]
複習(xí)11
7.2 導(dǎo)航和找路 ?NAVIGATION AND WAYFINDING p.214
城市規(guī)劃
The Image of the City by Kevin Lynch
Orientation 定向
Route Decision 路徑選擇
Mental mapping 意向圖
Closure 結(jié)局
界面設(shè)計 Interface Design
導(dǎo)航和尋路 Navigation and wayfinding
荷蘭 代爾夫特
臺北 101
澳門老城區(qū)
道路鋪面設(shè)計
找路的四大核心內(nèi)容
Orientation 定向
Route Decisions ?路徑選擇
Mental mapping ?意向圖
Closure 結(jié)局
意向地圖的五大元素
Paths 道路
Edges 邊界
Districts 區(qū)域
Nodes 節(jié)點(diǎn)
Landmarks 地標(biāo)
設(shè)計導(dǎo)航 Design Navigation
突出熱門目的地 Menus highlight popular destinations
路徑引路 Paths lead the way
——breadcrumb trails 面包屑路徑
鏈接支持發(fā)現(xiàn)和探索 links support discovery and exploration
清晰的“味”使選擇更容易 a clear scent makes choices easier
“信息的氣味”?（theory of the “scent of information”）
理論起源于施樂帕洛阿爾托研究中心（Xerox PARC）那里的研究者們推測，人們面對一個龐大而復(fù)雜的信息空間時會成為“信息覓食者（”informavores”）與捕獵獵物的動物表現(xiàn)出同樣的信息辙诞。用戶挑選出的氣味線索辙售，挑那些聞起來像是他們想要結(jié)果的味道。他們跟隨氣味的蹤跡, 如果氣味變得更強(qiáng)飞涂，變得更加自信和渴望旦部。如果他們失去了氣味, 他們就會按原味蹤跡折回, 再試一次。
邊界和地標(biāo)提供方向 boundaries and marks provide orientation
一致性使導(dǎo)航更容易
consistency makes navigation easier
搜索也需要導(dǎo)向找路
Search also needs wayfinding
全局導(dǎo)向找路的標(biāo)題 Headers for global wayfinding
本地導(dǎo)向找路的菜單 Menus for local wayfinding
導(dǎo)航和定向的面包屑痕跡
breadcrumbs trails for navigation and orientation
7.4 信息設(shè)計 INFORMATION DESIGN p.244
信息學(xué)
圍繞印刷信息所發(fā)展的圖書館索引和編目系統(tǒng)
書籍 vs. Web
頁碼丶索引丶目錄丶甚至標(biāo)題頁成為人們預(yù)期書籍必有的特點(diǎn)较店。Web文檔正在經(jīng)歷類似的士八，盡管速度更快的，演進(jìn)和標(biāo)準(zhǔn)化過程梁呈。
不要因迷失在網(wǎng)頁的新奇性中婚度，而把編輯一致性丶商務(wù)溝通和平面設(shè)計的基本標(biāo)準(zhǔn)拋在一邊。
設(shè)計信息
誰 Who
什么 What
何時 When
何地 Where
7.3 交互 INTERACTION p.230
重點(diǎn)：網(wǎng)站的二八法則
優(yōu)秀的交互設(shè)計在于“克制”
用戶更傾向于簡潔官卡、明晰的設(shè)計蝗茁，而不是一堆功能的堆疊
明確你的產(chǎn)品（網(wǎng)站醋虏、APP）為哪類用戶提供服務(wù)、明確什么是產(chǎn)品的最重要功能
二八法則 The 80/20 Rule
20%的網(wǎng)站功能占用了用戶80%的使用時間
百度首頁的界面很簡潔哮翘，80%的用戶打開百度使用的是搜索功能
Baidu提供的全部功能颈嚼，可能只有20%的用戶使用
模式提高可用性
網(wǎng)站設(shè)計了一種交互形式，如果這種形式合理饭寺、好用阻课，能夠使用戶有良好的反饋，那么其他網(wǎng)站也可能采取這種交互形式佩研。
這種交互形式成為一種模式柑肴，用戶看見它就會與網(wǎng)站設(shè)計者有心照不宣的默契，因?yàn)檫@種模式已經(jīng)在用戶心中形成“思維定式”了旬薯。
不要試圖去改變那種已經(jīng)形成“思維定式”的模式，比如購物車功能總在頁面的右上角适秩、單擊頭像區(qū)域能夠進(jìn)入個人中心绊序，等。
禁止縮捏放區(qū)域：形式凌駕于功能之上
網(wǎng)站設(shè)計永遠(yuǎn)在“形式”與“功能”兩者之間取得平衡秽荞。記住一句話“功能決定形式”骤公。
但實(shí)際情況是，很多設(shè)計將形式凌駕于功能之上了扬跋。比如阶捆，移動設(shè)備屏幕較小，用戶需要用手指縮捏放屏幕以放大細(xì)節(jié)钦听，但是移動設(shè)備中禁止縮捏放網(wǎng)頁的設(shè)計洒试，請確保你在形式好看（文字、排版）和用戶體驗(yàn)之間取得了平衡朴上。
再比如垒棋，去除網(wǎng)站中超鏈接的下劃線。超鏈接原本的設(shè)計是字體變色的同時添加下劃線痪宰，為的是讓普通用戶叼架、色盲色弱者都能夠在文本中輕易地分辨出超鏈接。但由于CSS允許設(shè)計者去除下劃線衣撬，不少網(wǎng)站設(shè)計師為了視覺好看而改變了超鏈接的原有形態(tài)乖订，這很容易導(dǎo)致用戶在使用網(wǎng)站時花費(fèi)更多的時間和精力在大片文本中找尋超鏈接。
提供交互組件 PROVIDING INTERACTIVE COMPONENTS
按鈕 Buttons
菜單 Menus
輸入 Inputs
切換 Toggles
框: WAI-ARIA (可訪問富互聯(lián)網(wǎng)應(yīng)用套件)作為最后的手段
禁用捏縮放
懸停 hover
選項(xiàng)卡 Tabs
文字輸入框 text input/area
組合框 Combo box
自動完成 Autocomplete
切換板 (Toggle) Panels
切換抽屜 (Toggle) Drawers
按鍵button
按鍵的目的是吸引用戶單擊/點(diǎn)擊它具练，從而觸發(fā)一個事件乍构。
按鍵通常的形式有：
-
形象
image.png -
以上二者的結(jié)合
image.png
菜單navigation
菜單是包含多種選擇的列表。它既具有展示意義靠粪，即告知用戶關(guān)于分類蜡吧、選擇的信息毫蚓，同時具有功能意義，即讓用戶通過點(diǎn)擊從一個頁面到達(dá)另一個頁面或是選擇觸發(fā)一種功能昔善。
下拉菜單欄的觸發(fā)List：
菜單欄常見的交互方式是點(diǎn)擊后展示下拉菜單元潘，下拉菜單中的選項(xiàng)皆從屬于這個大的分類下，從而滿足該分類的目標(biāo)用戶的需求君仆。需注意翩概，如果你的網(wǎng)站在電腦端和手機(jī)端使用的是同一個，不要將網(wǎng)站中觸發(fā)下拉菜單的行為單獨(dú)設(shè)置為“鼠標(biāo)懸头翟郏”钥庇，因?yàn)檫@將導(dǎo)致使用鍵盤或觸摸屏的用戶無法觸發(fā)下拉菜單。
分別在電腦和手機(jī)瀏覽器中打開騰訊視頻 咖摹，觀察下圖下拉菜單欄的觸發(fā)方式
選項(xiàng)卡面板Tab：
選項(xiàng)卡面板也是菜單的一種评姨。它的特點(diǎn)是通過鼠標(biāo)懸停/單擊切換不同的窗口，但用戶始終是停留在當(dāng)前這個頁面中的萤晴。
參考“毒霸網(wǎng)址大全”
巧用下拉菜單給用戶提供更好的體驗(yàn)：
Combo box
在用戶需要填寫一個潛在可填項(xiàng)很多的內(nèi)容時吐句，如國家/城市/大學(xué)名稱，如果讓用戶從下拉菜單選擇太耗時間店读，最好的做法是允許用戶自己輸入嗦枢，同時以下拉菜單的方式為用戶提供實(shí)時的結(jié)果匹配。
參考“攜程”
單選框和復(fù)選框提高輸入效率屯断、減少數(shù)據(jù)分析時間：
靈活使用單選框和復(fù)選框文虏，不但能夠提供用戶查找信息的效率、讓用戶擁有簡單易使用的感受殖演，同時在輸入信息比較復(fù)雜的情況下氧秘，指定選項(xiàng)大大減輕了后臺工作人員的負(fù)擔(dān)。
給輸入框添加默認(rèn)文字：
在輸入框中添加默認(rèn)文字能更好的引導(dǎo)用戶剃氧，比如在用戶未輸入內(nèi)容時顯示“輸入你想搜索的內(nèi)容”敏储，在輸入內(nèi)容不符合規(guī)范時顯示“輸入有誤”，等朋鞍。
切換toggle
切換也是單選框的概念已添，即兩個選項(xiàng)中一次僅能選擇一個，兩個相反的功能來回切換滥酥。
框: WAI-ARIA (可訪問富互聯(lián)網(wǎng)應(yīng)用套件)作為最后的手段
在 W3C 的文檔中, 在 HTML 中使用 WAI-ARIA , "WAI-ARIA的第一條規(guī)則" 是：
如果您可以將本機(jī) HTML 元素或?qū)傩耘c您所需的語義和行為一起使用, 而不是重新調(diào)整元素的用途, 并添加 WAI-ARIA 角色更舞、狀態(tài)或?qū)傩砸允蛊淇稍L問, 那么請執(zhí)行此操作。
WAI-ARIA , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的縮寫坎吻，指無障礙網(wǎng)頁應(yīng)用技術(shù)缆蝉。她主要解決的一個問題：讓殘障人士能無障礙地訪問網(wǎng)頁上的動態(tài)內(nèi)容，比如用靜態(tài)的(screen-reading technologies)瀏覽器瀏覽用Ajax技術(shù)制作的動態(tài)網(wǎng)頁，尤其幫助動態(tài)內(nèi)容和用Ajax, HTML, JavaScript和相關(guān)技術(shù)開發(fā)的高級用戶接口控件刊头。
但是黍瞧，使用WAI-ARIA不代表你不需要在普通的HTML組件中注意可用性，畢竟巧妙的設(shè)計能夠滿足殘障人士的需要原杂、也是普通用戶的需要印颤。制作網(wǎng)站時，隨時注意以下幾點(diǎn)：
鍵盤能夠鎖定網(wǎng)站的按鍵
鍵盤能夠在網(wǎng)站中自由運(yùn)作
用戶習(xí)慣性使用的鍵盤按鍵能夠觸發(fā)事件
按鈕的鎖定狀態(tài)要與未鎖定狀態(tài)區(qū)分
為視力障礙者設(shè)計能有效辨別的色彩
引導(dǎo)交互 GUIDING INTERACTION ?
標(biāo)簽 Labels
幫助和說明 Help and instructions
反饋 Feedback
框: 小控件設(shè)計模式和庫 BOX: Widget design patterns and libraries
小控件 Widget
必填字段 Required fields
提示 Tooltips
所有的設(shè)計都是為了“實(shí)現(xiàn)自我”穿肄，即讓用戶與功能互動起來,指導(dǎo)用戶如何使用這些功能年局。網(wǎng)站通過各種說明、標(biāo)簽咸产、提示性語言矢否、圖標(biāo)，告知用戶網(wǎng)站是如何運(yùn)作的脑溢、有哪些功能可用僵朗。
網(wǎng)站設(shè)計者如何去設(shè)計出對用戶“友好的”的功能引導(dǎo)，在一定程度上比功能本身要重要焚志。讓用戶感覺到你的網(wǎng)站是“友好的”衣迷，意味著他們愿意長時間、多次光臨你的網(wǎng)站酱酬。
GUI部件可以分為三種大類型：
Input output process
輸入 輸出 操作
學(xué)習(xí)參考資料
https://en.wikipedia.org/wiki/Widget_(GUI)
https://msdn.microsoft.com/library/windows/desktop/dn742399.aspx
