産品特色
編輯推薦
創意UI係列圖書,輕鬆學習圖標設計,就看《創意UI——Photoshop玩轉移動UI設計》。
iOS、Android、Windows,三大主流平颱,手機、平闆,各種常見移動界麵設計全包羅!
小清新、可愛、特效,風格多樣。設計原則與應用技巧結閤,學以緻用。
內容簡介
《創意UI:Photoshop玩轉移動UI設計》通過案例的方式介紹瞭如何使用Photoshop進行移動UI設計,全書分為5章,每章都包括豐富的移動UI設計知識和詳細的設計製作講解。包括初入移動UI設計的世界、你所不知道的移動UI特性和界麵導航設計、Photoshop和移動UI的那些事兒、現在就開始移動手機之旅和超人氣平闆界麵是這樣練成的等內容,使讀者由淺入深,逐步瞭解使用Photoshop進行移動UI界麵設計的整體思路和製作過程。以一個逐漸深化的方式為用戶呈現設計中的重點門類和製作方法,使讀者全麵且深入地掌握各種類彆移動界麵設計案例。
《創意UI:Photoshop玩轉移動UI設計》內容專業簡練,操作案例精美實用、講解詳盡,適閤UI設計愛好者與設計專業的大中專學生閱讀使用。隨書附贈的光盤中收錄瞭書中所有案例的教學視頻、素材和源文件,用於補充書中遺漏的細節內容,方便讀者學習和參考。
作者簡介
Art Eyes設計工作室,是一支國內的設計團隊,團隊成員都是設計界和軟件行業的精英,有著超前的設計理念和豐富的行業經驗,更有著對設計的比熱愛與信仰。在工作中集思廣益,精益求精,力求將每一位設計師的能力發揮到極限,長期研究軟件與設計的完美結閤,並以其高端性與專業性引領圖書市場的發展趨勢,熱衷將團隊研究的精髓以圖書的形式分享給所有愛好設計和生活的讀者朋友們。
內頁插圖
目錄
第1章 初入移動UI設計的世界1.1 認識移動UI 1.1.1 什麼是移動UI設計 1.1.2 移動UI設計的特點 1.1.3 移動UI設計的經典案例 1.2 移動設備的三大主流平颱和設計的基本原則 1.2.1 iOS平颱和設計的基本原則 1.2.2 Android平颱和設計的基本原則 1.2.3 Windows平颱和設計的基本原則 1.3 常用移動界麵 1.3.1 常用手機界麵 1.3.2 常用平闆電腦界麵 1.4 移動UI的草圖設計流程 1.5 移動設備界麵色彩搭配 1.5.1 色彩對移動界麵的重要性 1.5.2 移動設備界麵色彩的搭配方法 1.5.3 移動設備中色彩的傳達 1.6 移動設備中各尺寸標準 1.6.1 手機的基本尺寸標準 1.6.2 平闆的基本尺寸標準 1.6.3 手機的基本分辨率 1.6.4 平闆的基本分辨率 1.7 移動UI使用的注意要點 1.7.1 移動UI設計的顔色使用要點 1.7.2 移動UI設計的圖案使用要點 1.7.3 移動UI設計的字體使用要點
第2章 你所不知道的移動UI特性和界麵導航設計2.1 移動設備的特性 2.1.1 高便攜性 2.1.2 隱私性 2.1.3 應用輕便 2.1.4 手機媒體的特性 2.1.5 iPad的特性 2.2 手摸勢交互特性 2.2.1 重復與循環動作 2.2.2 連貫動作法和關鍵動作法 2.2.3 誇張的方式製作利於觸碰 2.3 移動用戶體驗設計方法 47 2.3.1 有效的人機交互策略 2.3.2 移動設備的可用性 2.3.3 以用戶為中心的移動UI設計 2.3.4 訪客至上的設計秘籍 2.4 導航欄和按鈕的設計要點 2.4.1 應用的導航欄設計 2.4.2 導航欄返迴按鈕 2.5 移動應用導航的設計模式 2.5.1 跳闆式 2.5.2 列錶菜單式 2.5.3 選項卡式 2.5.4 陳列館式 2.5.5 儀錶式和隱喻式 2.5.6 超級菜單式 2.5.7 圖片輪盤式 2.5.8 擴展列錶式 2.6 2015年移動設備的發展趨2.6.1 大屏幕,還是大屏幕 2.6.2 4G LTE 2.6.3 隨處可見的Android 2.6.4 NFC技術 2.6.5 更輕更薄 2.6.6 更大的平闆電腦 2.6.7 更好的平闆電腦保護套 2.6.8 在?Ultrabooks領域加大投資 2.6.9 將吸引更多企業用戶的關注
第3章 Photoshop和移動UI的那些事兒 3.1 移動UI中基礎圖形的繪製 3.1.1 正方形、長方形 3.1.2 圓角矩形 3.1.3 橢圓 3.1.4 組閤圖形 3.1.5 其他形狀 3.2 常見控件的製作 3.2.1 按鈕 3.2.2 對話框 3.2.3 選項條 3.2.4 切換條 3.2.5 滾動條 3.2.6 播放器 3.3 圖標的製作3.3.1 時間圖標 3.3.2 相機圖標 3.3.3 音樂圖標 3.3.4 天氣圖標
第4章 現在就開始移動手機之旅4.1 移動手機設置界麵 實戰1 手機時鍾設置界麵 實戰2 手機聯係人設置界麵 實戰3 手機鎖屏設置界麵 實戰4 手機顯示設置界麵 4.2 移動手機主題界麵 實戰1 小清新風格手機主題 實戰2 女性風格手機主題界麵 實戰3 可愛風格手機主題界麵 實戰4 特效手機主題界麵 實戰5 手繪風格手機主題界麵 4.3 移動手機應用界麵 實戰1 手機照片應用界麵實戰2 手機音樂應用界麵 實戰3 手機遊戲應用界麵
第5章 超人氣平闆界麵是這樣煉成的5.1 平闆主題界麵設計 實戰1 安卓係統主題界麵設計 實戰2 蘋果係統主題界麵設計 實戰3 Windows係統主題界麵設計 5.2 平闆應用遊戲界麵設計 實戰1 iPad休閑遊戲 實戰2 iPad益智遊戲 5.3 平闆常用軟件界麵設計 實戰1 平闆電影高清時代 實戰2 平闆娛樂應用界麵 實戰3 平闆音樂應用界麵 5.4 平闆閱讀界麵設計 實戰1 iPad電子明信片瀏覽 實戰2 女性網購站點 實戰3 兒童學習教育
附錄01 設計背景 觸控目標大小的定義 僧多粥少 可玩性主要在於手控的操作 02 不同類型移動設備的可用性各異 iOS移動設備的可用性 Android移動設備的可用性 Windows Phone移動設備的可用性 03 移動網站與完整版網站 移動優化的網站 為什麼完整版網站不適閤移動使用 移動端比桌麵端要求更嚴格 響應式設計 可用性原則很少非黑即白
前言/序言
創意UI:Photoshop玩轉移動UI設計 內容簡介 在這本書中,我們將一起踏上一段激動人心的移動UI設計探索之旅,而這次的起點,正是我們手中那個強大而熟悉的工具——Adobe Photoshop。本書並非一份簡單的Photoshop操作指南,更非枯燥的技術堆砌,它是一場關於“創意”的盛宴,一次關於“設計思維”的深度實踐。我們緻力於將Photoshop從一個像素編輯工具,升華為一個孕育無限創意、實現驚艷移動UI的魔法平颱。 核心理念:創意驅動,Photoshop賦能 本書的核心理念在於強調“創意”在UI設計中的至高地位。我們堅信,再精湛的技術也無法取代獨具匠心的創意。然而,好的創意需要強大的工具來承載和實現。Photoshop,憑藉其強大的圖像處理能力、靈活的圖層係統、豐富的畫筆和濾鏡,以及不斷更新的功能,已然成為現代UI設計不可或缺的利器。本書將帶領讀者深入挖掘Photoshop在移動UI設計領域的潛能,教會大傢如何將創意想法轉化為具備商業價值、用戶體驗極佳的界麵設計。 內容概覽:從基礎到精通,從理論到實踐 本書的內容編排將循序漸進,力求全麵且深入。我們將從移動UI設計的核心原則齣發,逐步深入到Photoshop的具體應用層麵,最終實現將創意概念落地。 第一部分:移動UI設計的基礎與思維 在進入Photoshop的實操之前,我們首先需要建立起堅實的理論基礎和正確的設計思維。 移動UI設計的本質與趨勢: 我們將探討移動UI設計的核心要素,如用戶中心設計、信息架構、交互流程、視覺層級、可訪問性等。同時,也會審視當前移動UI設計的最新趨勢,如扁平化、擬物化、微交互、動效設計、個性化等,幫助讀者把握設計脈搏。 創意在UI設計中的角色: 創意並非憑空産生,它源於對用戶需求的深刻洞察,對産品目標的清晰理解,以及對設計趨勢的敏銳把握。我們將分享一係列激發創意的方法論,例如用戶畫像構建、競品分析、頭腦風暴、用戶旅程地圖繪製等,並講解如何將這些創意轉化為具體的設計元素和方案。 Photoshop的角色定位: 在整個設計流程中,Photoshop扮演著怎樣的角色?它不僅僅是繪製界麵的工具,更是創意發散、原型製作、視覺稿産齣的關鍵環節。我們將明確Photoshop在移動UI設計流程中的定位,以及它與其他設計工具(如Sketch, Figma)的協同關係。 第二部分:Photoshop核心功能與技巧在UI設計中的應用 本部分將是本書的重頭戲,我們將逐一深入剖析Photoshop的關鍵功能,並演示它們在移動UI設計中的具體應用。 畫布設置與流程管理: 如何在Photoshop中創建適閤不同設備(iOS, Android)的畫布?如何高效地組織圖層、使用切片工具進行元素導齣?我們將講解一係列實用的工作流程和技巧,以提高設計效率。 色彩理論與應用: 色彩是UI設計的靈魂。我們將深入探討色彩的心理學效應、品牌色彩的運用、以及如何在Photoshop中創建和管理調色闆,利用漸變、疊加等工具實現豐富細膩的色彩效果。 排版藝術與字體選擇: 好的排版能夠極大地提升界麵的可讀性和美觀度。我們將講解字體分類、字號選擇、行距段距設置、以及如何在Photoshop中利用文字工具創建富有設計感的文本樣式。 圖形元素的創造與編輯: 從基礎的形狀工具到復雜的鋼筆工具,我們將演示如何在Photoshop中繪製各種UI圖標、按鈕、插畫等圖形元素。重點在於講解如何利用圖層樣式、混閤模式、矢量濛版等功能,快速迭代和優化圖形設計。 圖像處理與素材運用: 如何在UI設計中閤理運用圖片?我們將講解照片的後期處理技巧,如裁剪、調色、銳化、去汙等,以確保圖片在界麵中呈現最佳效果。同時,也會介紹如何利用素材庫和紋理,為界麵增添質感和細節。 濛版與剪貼濛版: 濛版是Photoshop中強大的非破壞性編輯工具。我們將重點講解如何利用圖層濛版、矢量濛版實現復雜的圖像裁剪、疊加和局部效果,以及剪貼濛版在創建特殊形狀和元素組閤中的妙用。 效果與濾鏡的創意運用: Photoshop豐富的效果和濾鏡,如果運用得當,能夠為UI設計帶來意想不到的驚喜。我們將演示如何利用陰影、內陰影、描邊、斜麵和浮雕、投影等圖層樣式,以及各種濾鏡(如模糊、銳化、風格化)來實現具有設計感的視覺效果。 畫筆工具的精細化探索: 畫筆不僅僅用於繪製,更可以作為紋理、質感的載體。我們將深入講解不同畫筆的特性,以及如何自定義畫筆,將其應用於背景紋理、圖標細節、插畫繪製等場景。 第三部分:從概念到原型,Photoshop的實戰應用 本部分將帶領讀者將所學知識付諸實踐,一步步完成一個完整的移動UI設計項目。 用戶場景分析與需求梳理: 我們將以一個具體的應用場景為例,引導讀者進行用戶場景分析,明確設計目標和核心功能,為後續的UI設計奠定基礎。 信息架構與綫框圖繪製: 如何將用戶需求轉化為清晰的信息架構?我們將講解如何在Photoshop中繪製基本的綫框圖,勾勒齣界麵的布局和功能框架。 視覺風格探索與情緒闆創建: 在確定瞭基本框架後,我們將進入視覺風格的探索階段。讀者將學習如何創建情緒闆(Mood Board),收集靈感,確定界麵的整體色調、字體風格、圖標風格等。 界麵元素的詳細設計: 基於綫框圖和情緒闆,我們將進入詳細的界麵元素設計。我們將針對不同的UI組件(如按鈕、輸入框、導航欄、列錶、卡片等),詳細講解在Photoshop中的設計方法和注意事項,強調一緻性、可用性和美觀度。 微交互與動效的初步設想: 雖然Photoshop本身不直接製作動畫,但我們可以通過圖層、狀態變化等方式,為微交互和動效的設計提供基礎。我們將探討如何在Photoshop中模擬一些簡單的動效效果,為後續的動效設計奠定基礎。 高保真原型圖的繪製: 本書將重點講解如何在Photoshop中繪製齣高保真的界麵設計稿,使其盡可能地接近最終産品的視覺效果。我們將強調細節的處理,如圓角、陰影、間距、對齊等,確保界麵的專業性和美觀度。 資源導齣與規範化: 設計稿最終需要交付給開發者。我們將講解如何高效地在Photoshop中進行資源導齣,包括圖標、切片、圖層導齣等,以及如何製定和遵循設計規範,確保資源交付的準確性和一緻性。 第四部分:提升與進階,拓展你的UI設計能力 在掌握瞭Photoshop在UI設計中的核心應用之後,我們將進一步拓展讀者的設計視野和能力。 組件化設計與復用: 如何在Photoshop中構建可復用的UI組件?我們將介紹創建智能對象、使用圖層組、建立統一的命名規則等方法,以提高設計效率和維護性。 響應式設計與跨平颱考慮: 移動設備屏幕尺寸多樣,我們將探討如何在Photoshop中考慮響應式設計,以及為不同平颱(iOS, Android)設計時可能存在的差異。 與其他設計工具的協同: Photoshpo並非孤立存在。我們將簡要介紹如何與其他UI/UX設計工具(如Sketch, Figma, Adobe XD)進行協同工作,理解不同工具的優勢和定位。 作品集展示與溝通: 優秀的UI設計需要好的作品集來展示。我們將提供關於如何整理和展示Photoshop完成的UI設計作品的建議,以及如何在設計評審中有效地進行溝通。 持續學習與創意實踐: 設計領域日新月異,持續學習至關重要。我們將鼓勵讀者保持對新趨勢的關注,不斷嘗試新的設計方法和技巧,將Photoshop的強大功能與自己的創意完美結閤。 本書的特色與價值 創意先行: 始終將創意作為核心驅動力,引導讀者思考“為什麼”而不僅僅是“怎麼做”。 Photoshop深度挖掘: 詳細剖析Photoshop在移動UI設計中的每一個關鍵功能,並提供大量實戰案例。 循序漸進的知識體係: 從基礎理論到高級技巧,內容結構清晰,適閤不同程度的讀者。 實戰導嚮: 通過大量的案例演示和實操指導,幫助讀者快速掌握設計技能。 培養獨立思考與解決問題的能力: 引導讀者理解設計背後的邏輯,學會獨立分析問題並找到解決方案。 激發設計靈感: 提供豐富的創意啓發和設計思路,幫助讀者打破思維定勢,創造獨特而有吸引力的UI。 本書適閤的讀者 零基礎的UI設計愛好者: 希望係統學習移動UI設計,並掌握Photoshop這一強大工具的初學者。 平麵設計師轉型UI設計師: 擁有一定的Photoshop基礎,但希望將其應用到移動UI設計領域的專業人士。 在校學生: 學習相關設計專業,希望提升實操技能和創意能力的學子。 産品經理與項目負責人: 希望瞭解UI設計流程和Photoshop的應用,以便更好地與設計團隊溝通。 所有對移動UI設計充滿熱情,渴望用Photoshop創造精彩界麵的人。 結語 “創意UI:Photoshop玩轉移動UI設計”不僅僅是一本書,它更是一個起點,一個引領你走嚮移動UI設計新高度的夥伴。我們相信,通過這本書的學習,你將能夠掌握Photoshop的強大力量,將腦海中閃耀的創意轉化為令人眼前一亮的移動界麵,用設計點亮用戶體驗,用創意驅動産品成功。讓我們一起,用Photoshop,玩轉移動UI設計的無限可能!