本書分為開始、風格、驚喜、創(chuàng)意和爆發(fā)五章,循序漸進地講述了移動UI的基礎(chǔ)概念、五大要素的內(nèi)容、十大界面元素的設(shè)計、移動設(shè)備基礎(chǔ)應(yīng)用程序的界面設(shè)計和完整APP客戶端的界面設(shè)計這五個方面的內(nèi)容。
◆APP界面不同于網(wǎng)頁應(yīng)用界面,設(shè)計師需要挑戰(zhàn)小尺寸屏幕,將眾多的信息放在其中,這無疑是一個巨大的挑戰(zhàn)。
◆面對用戶對APP的視覺要求,UI設(shè)計師要如何滿足用戶要求,如何使自己設(shè)計的軟件盈利呢?那么多的設(shè)計要求,要怎么才能抓住用戶真正在意的核心訴求?怎樣才能創(chuàng)作出既符合系統(tǒng)設(shè)計規(guī)范,又滿足大眾視覺需要的產(chǎn)品呢?這些都是困擾設(shè)計師們的問題。
◆本書通過大量創(chuàng)作思路的分析講解,對APP的視覺設(shè)計進行有目的的引導,呈現(xiàn)出從無到有,從有到精的過程,幫助讀者掌握APP視覺創(chuàng)意的思路和設(shè)計方法
隨著移動設(shè)備的迅猛發(fā)展,對移動設(shè)備中的應(yīng)用程序需求越來越多,而各種應(yīng)用程序界面設(shè)計良莠不齊,用戶通常會選擇界面視覺效果良好,且具有良好體驗的應(yīng)用留在自己的移動設(shè)備上長期使用。移動界面不同于網(wǎng)頁應(yīng)用的界面,設(shè)計師需要挑戰(zhàn)小尺寸屏幕,需要將眾多的信息放在小尺寸屏幕里,這無疑是一個巨大的挑戰(zhàn)。
面對用戶對APP的視覺要求,UI設(shè)計師如何滿足用戶要求,如何使自己設(shè)計的軟件盈利呢?那么多的設(shè)計要求,要怎么才能抓住用戶真正在意的核心訴求?怎樣才能創(chuàng)作出既符合系統(tǒng)設(shè)計規(guī)范,又滿足大眾視覺需要的產(chǎn)品?這些都是設(shè)計師們困擾的問題。本書通過講解大量的創(chuàng)作思路,對移動APP的視覺設(shè)計進行有目的的引導,呈現(xiàn)出從無到有,從有到精的過程,幫助讀者掌握APP的設(shè)計方法和思路。
通過“設(shè)計指南概述”這個模塊來對移動設(shè)備界面中十大設(shè)計元素的設(shè)計規(guī)范和制作特點進行講解,幫助讀者快速掌握移動設(shè)備界面設(shè)計的細節(jié)。
將單個界面元素的演變記錄下來,通過形狀的改變、色彩的調(diào)整、特效的修飾、材質(zhì)的添加等環(huán)節(jié)來呈現(xiàn)界面元素的設(shè)計過程和創(chuàng)意流程。
利用完整實例中的“項目任務(wù)”對界面設(shè)計提出要求,通過“提取關(guān)鍵字”模塊讓讀者學會抓住設(shè)計要求中的核心字眼,也就是抓住設(shè)計的重點。
詳細講解各個案例中所使用的思維方式禾口創(chuàng)意來源,以提取的關(guān)鍵字為中心進行發(fā)散聯(lián)想,展示出設(shè)計的思路,讓讀者認識APP界面設(shè)計的全新方法。
主要講述與移動UI視覺設(shè)計相關(guān)的基礎(chǔ)概念、設(shè)計原則以及界面設(shè)計所需的Photoshop軟件的常用基礎(chǔ)知識,讓讀者擁有設(shè)計的敲門磚。
移動UI界面設(shè)計因為尺寸、主題、布局、字體和色彩這五大要素的不同而產(chǎn)生影響,在此將對這五大要素進行詳細的講解和分析。
剖析移動設(shè)備界面中十個最為常用且最基礎(chǔ)的設(shè)計元素,詳細講解這些元素的設(shè)計規(guī)范和設(shè)計要點,通過循序漸進的方式展示出設(shè)計的思路,以及優(yōu)秀作品的演變過程。
以移動設(shè)備中的基礎(chǔ)應(yīng)用程序的設(shè)計為主要內(nèi)容,通過案例的形式對這些應(yīng)用程序的界面進行設(shè)計,并總結(jié)這些界面的特點,利用個性化的設(shè)計來表現(xiàn)基礎(chǔ)應(yīng)用程序的界面。
以完整的項目設(shè)計進行講解,通過提出設(shè)計要求、提煉設(shè)計要點、分析設(shè)計思路、剖析制作步驟等環(huán)節(jié)展示出一個完整APP的創(chuàng)作過程和思路。
釜函本書由北京印刷學院嚴晨老師編寫Chapter Ol~Chapter 03部分內(nèi)容,由北京市環(huán)境與藝術(shù)學校楊智坤老師編寫Chapter 04和Chapter 05部分內(nèi)容。特別感謝北京印刷學院數(shù)字媒.體藝術(shù)實驗室(北京市重點實驗室)在本書的出版過程中提供的大力資助。盡管作者在編寫過程中力求準確、完善,但是書中難免會存在疏漏之處,懇請廣大讀者批評指正,讓我們共同對書中的內(nèi)容一起進行探討,實現(xiàn)共同進步。
編者 2015年2月
Chapter01 開始獲取移動UI視覺設(shè)計的敲門磚
1.2.1 完整性原則
1.2.2 一致性原則
1.2.3 直觀性原則
1.2.4 習慣性原則
1.3.1 情感化設(shè)計
1.3.2 差異化設(shè)計
1.3.3 和諧化設(shè)計
1.4.1 發(fā)散思維
1.4.2 將思考視覺化
1.4.3 尋找切入點
1.5.1 繪圖工具
1.5.2 圖層樣式
1.5.3 不透明度與填充
Chapter02 風格五大要素構(gòu)建界面基礎(chǔ)印象
2.1 設(shè)備的尺寸
2.2 主題的設(shè)定
2.2.1 系統(tǒng)主題
2.2.2 正確選擇主題突顯設(shè)計的特點
2.3.1 應(yīng)用結(jié)構(gòu)
2.3.2 多視圖布局
2.3.3 滾動視圖
2.4.1 字體的規(guī)定類型
2.4.2 默認的文字顏色
2.4.3 字體的縮放
2.4.4 文字的個性來自反復(fù)推敲的過程
2.5.1 系統(tǒng)規(guī)定的色彩
2.5.2 UI視覺設(shè)計中色彩使用的原則
2.5.3 根據(jù)設(shè)計需要選擇色彩
Chapter03 驚喜揭秘十大界面元素設(shè)計的演變過程
3.1.1 設(shè)計指南概述
3.1.2 小圖標和上下文圖標
3.1.3 創(chuàng)意演變大揭秘
3.2.1 設(shè)計指南概述
3.2.2 創(chuàng)意演變大揭秘
3.3.1 設(shè)計指南概述
3.3.2 創(chuàng)意演變大揭秘
3.4.1 設(shè)計指南概述
3.4.2 創(chuàng)意演變大揭秘
3.5.1 設(shè)計指南概述
3.5.2 創(chuàng)意演變大揭秘
3.6.1 設(shè)計指南概述
3.6.2 創(chuàng)意演變大揭秘
3.7.1 設(shè)計指南概述
3.7.2 創(chuàng)意演變大揭秘
3.8.1 設(shè)計指南概述
3.8.2 創(chuàng)意演變大揭秘
3.9.1 設(shè)計指南概述
3.9.2 創(chuàng)意演變大揭秘
3.1 0.1 設(shè)計指南概述
3.1 0.2 創(chuàng)意演變大揭秘
Chapter04 創(chuàng)意開啟靈感源泉構(gòu)思個性移動UI
4.1.1 縱向思維定義主要元素:標簽
4.1.2 標簽的數(shù)量決定了界面色彩的豐富程度
4.1.3 彩色標簽決定界面風格:活潑、輕快
4.1.4 實例制作步驟解析
4.2.1 按時間順序定義界面主要元素時間線
4.2.2 用藍綠色表現(xiàn)短信內(nèi)容的未知性
4.2.3 單色設(shè)計元素與繁雜背景混搭
4.2.4 實例制作步驟解析
4.3 拍照及相冊界面設(shè)計
4.3.1 依據(jù)功能確定界面設(shè)計要點:開放式、幻燈片
4.3.2 根據(jù)案例素材照片搭配界面色彩
4.3.3 照片色彩決定界面風格:清爽、柔美
4.3.4 實例制作步驟解析
4.4 計算器界面設(shè)計
4.4.1 從功能人手定義界面主要元素:計算器
4.4.2 為計算器界面進行配色
4.4.3 確定計算器元素界面風格:真實、質(zhì)樸
4.4.4 實例制作步驟解析
4.5 單位換算界面設(shè)計
4.5.1 根據(jù)功能及作用定義界面主要元素:綠色、矩形
4.5.2 使用不同明度的綠色和黑色進行配色
4.5.3 雙色搭配決定界面風格:清晰、醒目
4.5.4 實例制作步驟解析
4.6 錄音機界面設(shè)計
4.6.1 根據(jù)現(xiàn)實操作定義主要元素磁帶
4.6.2 參照磁帶素材對界面進行配色
4.6.3 黑色磁帶元素決定界面風格冷調(diào)、質(zhì)感
4.6.4 實例制作步驟解析
4.7 收音機界面設(shè)計通過形象思維具象化設(shè)計元素:
4.7.1 電磁波
4.7.2 根據(jù)收音機的顏色進行配色
4.7.3 都市照片和矩形電磁波定義界而風格:時尚、簡約
4.7.4 實例制作步驟解析
4.8 音樂播放界面設(shè)計
4.8.1 發(fā)散思維尋找界面主要元素:CD光盤
4.8.2 用復(fù)古色調(diào)的照片進行配色
4.8.3 復(fù)雜背景決定界而元素風格:簡單
4.8.4 實例制作步驟解析
4.9 日歷界面設(shè)計
4.9.1 根據(jù)界面內(nèi)容的限制來敲定界面布局:棋盤式
Chapter05 爆發(fā)升級創(chuàng)意創(chuàng)作完美移動UI界面
……