本書全面闡述網站及移動應用的導航設計理論、方法和案例分析的專業書籍。主要內容包括:認識導航,導航的設計理論及原則,導航系統分類,導航的基石,導航的核心,導航的焦點,導航評價,移動APP和Web導航策略。
關于筆者
王愉,北京印刷學院數字媒體藝術專業副教授,江南大學博士(產品設計理論與技術專業),師從辛向陽導師。對于網頁視覺設計,我已經從事教學科研及設計實踐工作達十年之久。網頁視覺設計越來越接近一門“藝術”,其設計和功能的趨勢雖不能說瞬息萬變,但也還是在技術的支撐下高速發展,所以我必須不斷通過大量的研究與實踐來保證我有足夠的經驗來教授學生,確保他們在大學可以學習到真正實用的技能以應對嚴峻的就業形勢。
在多年的教學和實踐中,我非常了解大家的需求,無論是我的學生或者是項目客戶,以及實際崗位上的網頁設計師。
這也是我創作這樣一本界面導航圖書的信心來源。
創作背景
當下,界面設計已經成為了一個綜合性的工作,必須考慮包括視覺設計、信息設計、交互設計、體驗設計等等細節,在綜合考慮所有因素之后,才能逐漸完善出一個產品。
導航作為網站/APP 的核心功能之一,設計得成功與否,直接關系到用戶體驗是否良好。隨著上網設備的多元化及瀏覽器性能的高速發展,網站設計需要兼容多種設備和屏幕。傳統桌面網站的導航設計相對比較成熟了,但隨著比如HTML5 等新技術的不斷升級,導航設計可以做到更多功能和實現更優質的視覺效果。而在目前移動網站和移動應用并存的時期,移動界面導航設計也有了其自身的特點。
在我的教學和實踐中,我經常發現,導航設計雖然如此重要,但經常成為第一個被忽視的細節。因為導航設計在商業設計中,比起絢麗的配色、靈活的動效設計,是一個相對“低調”的設計點,好多同學寧愿把精力放在配色、結構和自認為的“體驗”等方面,而不愿意過多關注導航這個默默無聞但其實至關重要的設計。
于是,這成為了我創作這本書的源動力,集結之前發表的一系列與導航設計相關的論文以及目前最新的設計案例,成為了本書的雛形。之后,在編輯欒大成的鼓勵下,咬牙堅持了2 年多,期間大規模改版兩次,修訂了4 次,直到交稿半年依然不顧出版社的相關規定繼續更新內容,在大成的網開一面下變成了目前這個版本,雖然不甚完美,但確實能力至此了。
本書內容
本書是一本全面闡述網站及移動應用的導航設計理論、方法和案例分析的專業書籍。分為七章。
第1 章 導航的設計理論及原則。介紹導航的需求和導航的定義,講解以用戶為中心、用戶體驗要素、情感化設計、最小努力、降低不確定感、重復性等設計理論。
第2 章 導航系統的分類。講解結構性導航系統、關聯性導航系統、實用性導航系統。
第3 章 Web導航的基石。講解結構層,信息構架方法、交互設計。
第4 章 Web導航的核心。講解框架層,導航要素設計、信息設計、界面設計、線框圖及原型。
第5 章Web 導航的焦點。講解表現層,視覺設計概述、風格設計、交互的視覺呈現、格式塔效應、視覺影響、導航布局。
第6 章 Web導航評價。講解導航評價方法、導航測試、優秀導航案例。
第7 章移動APP/Web 的導航策略。移動導航模式分類、移動導航視覺元素設計、移動導航交互設計原則,以及對未來的展望等。
本書特色
新案例:隨著交互設計理論的不斷完善、企業對用戶研究的深入,網站或移動應用產品的導航形式也隨之更新。網站改版、設計趨勢改變等諸多原因,促使本書在撰寫過程中不斷替換舊的實例或選擇新舊兩種形態進行對比,使讀者能夠更加深入地了解行業趨勢和主流產品。
理論既是實踐的基石也是實踐的結晶:在互聯網和交互設計領域,理論并不是一成不變、永遠正確的。本書在闡明理論時輔以大量案例參考,有助于提高讀者的理解力。設計實踐需要理論的指導,同時,也需要推動理論的發展。實踐使理論生動,理論使實踐扎實。
關于本書
本書出版獲得北京市教委人才強教創新團隊項目(北京印刷學院田忠利,06040109001);國家社會科學基金藝術學一般項目“基于國際前沿視野的交互設計方法論研究”,(江南大學辛向陽,12BG055)資助。
本書主要由王愉撰寫,參與本書撰寫工作的有:北京印刷學院王愉、微軟公司李文博、北京印刷學院楊樂、隋涌、付震蓬、羅慧、魯藝、連環、趙一飛、王菲,研究生黃婷、徐曉彤、郁涯、張曉蒙、張晨蕾、張伶、初月、易娟、王熙瑤、周斌等。
本書由王愉、黃婷審校,田忠利、楊虹、史民峰、嚴晨監制。
關于讀者
本書適用于網站設計師、移動媒體視覺設計師、新媒體交互設計師,大中專院校設計專業師生、平面設計愛好者、培訓機構相關專業師生等。本書涉及諸多設計理論,建議讀者溯本求源,深入或擴展閱讀信息源。
關于案例
由于互聯網行業設計產品更新較快,本書采用的案例讀者未必還可以搜索到,建議讀者以發展的心態來學習和研究這個領域的相關知識。另外,本書極個別案例來自互聯網,并無法查明出處,如果本書用到了您的作品,煩請告知,將在下一版予以更正。在此也感謝這些卓越的設計師讓我們的互聯網生活多姿多彩。
感謝
這部分內容雖然是套路,但是相信每個認真創作的作者都會真真切切地感受到來自周邊朋友的幫助,
很多時候,這些幫助都是潛移默化的。非常感謝江南大學博士導師辛向陽的耐心指導。在此由衷感謝清華大學出版社欒大成編輯給予的無限耐心和寶貴意見。感謝本書引用的理論、作品的原作者,你們的智慧和創意是本書綻放的基礎。感謝老張的關愛、父母的敦促、姐姐的支持和小米的陪伴。衷心感謝每一位讀者,如果您耐著性子看到這里,那就再次感謝一次。
王愉,北京印刷學院副教授、碩士研究生導師、江南大學博士生、高級攝影師。2007年、2012年北京市教委赴美訪問學者,2010年清華大學訪問學者。入選北京市中青年骨干教師;第九屆“雅昌教育獎”獲得者;校級精品課程負責人;精品教材主編。曾主持北京市教委科技創新平臺項目、北京市教委社科計劃項目、校重點教學改革項目、校級重點科研項目。出版《FIashActionScript3.0溢彩編程》、《DHTML動態網頁設計》等書籍,發表多篇論文、多項設計、攝影作品。在多年的教學與視覺研究中,始終堅持:讓每一個作品與市場對接,讓每一個學生與社會對接。
第1章 界面導航的設計理論及原則
1.1 導航需求
1.2 導航定義
1.3 以用戶為中心
1.3.1 需求層次理論
1.3.2 基于UCD的導航設計
1.4 用戶體驗要素
1.5 情感化設計
1.6 最小努力
1.7 降低不確定感
1.8 藝術性原則
1.9 隱喻
1.10 設計模式
第2 章 界面導航系統的分類
2.1 結構性導航系統
2.1.1 全局導航
2.1.2 局部導航
2.2 關聯性導航系統
2.2.1 上下文導航
2.2.2 面包屑導航
2.2.3 步驟導航
2.2.4 輔助導航
2.2.5 頁腳導航
2.2.6 頁碼導航
2.2.7 快速鏈接
2.2.8 友情鏈接
2.2.9 錨點鏈接
2.2.10 標簽云
2.3 實用性導航
2.3.1 標識鏈接
2.3.2 語種或地域導航
2.3.3 搜索引擎
2.3.4 網站地圖
第3 章 導航的基石——結構層
3.1 信息構架
3.1.1 信息結構圖示
3.1.2 卡片分類法
3.1.3 信息構架案例
3.2 交互設計
第4章 導航的核心——框架層
4.1 導航要素設計
4.1.1 菜單
4.1.2 鏈接文本
4.1.3 按鈕
4.1.4 面包屑
4.1.5 標簽和卡片堆
4.1.6 顏色編碼
4.1.7 圖片與圖標
4.2 信息設計
4.2.1 位置
4.2.2 字母表
4.2.3 時間
4.2.4 類別
4.2.5 層級
4.3 界面設計
4.4 線框圖
4.5 原型
第5章 導航的焦點——表現層
5.1 視覺設計概述
5.2 風格設計
5.2.1 菜單、標簽、按鈕、圖標
5.2.2 文字和數字
5.2.3 空間
5.2.4 最小化或無導航
5.2.5 圖像導航
5.2.6 模擬紙制品
5.2.7 封面頁
5.2.8 第一屏
5.3 交互的視覺呈現
5.3.1 導航菜單的交互視覺效果
5.3.2 Ajax技術的應用
5.3.3 Flash技術的保全方案
5.3.4 鏈接文本的四種狀態
5.3.5 鏈接的響應區域
5.3.6 Material Design交互動效
5.4 格式塔效應
5.4.1 接近性
5.4.2 相似性
5.4.3 連續性
5.4.4 對稱性
5.4.5 完整和閉合傾向
5.4.6 共同方向運動
5.4.7 主體背景法則
5.5 視覺影響
5.5.1 分組及對齊
5.5.2 視覺層次
5.5.3 視線流
5.6 導航布局
5.6.1 橫向頂部
5.6.2 縱向左側
5.6.3 橫向底部
5.6.4 縱向居中
5.6.5 隨意布局
5.6.6 浮動布局
第6章 導航評價
6.1 導航評價方法
6.1.1 符合用戶目標
6.1.2 與網站類型相稱
6.1.3 廣度與深度的平衡
6.1.4 視覺清晰
6.1.5 統一性
6.1.6 良好的反饋
6.1.7 有效率、有效果
6.1.8 易學易用
6.2 導航測試
6.2.1 測試方法與內容
6.2.2 眼動追蹤技術
6.2.3 導航測試分析
6.3 優秀導航案例
第7章 移動APP和移動Web的導航策略
7.1 移動APP和Web的導航模式分類
7.1.1 菜單欄模式
7.1.2 標簽模式
7.1.3 抽屜模式
7.1.4 樹狀模式
7.1.5 平鋪頁面模式
7.1.6 組合模式
7.1.7 模態視圖模式
7.1.8 沉浸模式
7.1.9 旋轉木馬模式
7.1.10 卡片瀑布流模式
7.1.11 導航模式案例
7.2 移動APP/Web的導航視覺元素設計
7.2.1 導航結構
7.2.2 導航布局
7.2.3 導航顏色
7.2.4 導航文字
7.2.5 導航圖標
7.2.6 "使能"的設計
7.2.7 扁平化設計
7.2.8 Google Material Design
7.3 移動APP/Web導航交互設計原則
7.3.1 布局合理
7.3.2 界面簡潔
7.3.3 細化場景
7.3.4 減少輸入
7.3.5 積極反饋
7.4 展望
參考文獻