新印象——中文版Sketch圖標與UI界面設計實例教程

陳曉歷

  • 新印象——中文版Sketch圖標與UI界面設計實例教程-preview-1
  • 新印象——中文版Sketch圖標與UI界面設計實例教程-preview-2
新印象——中文版Sketch圖標與UI界面設計實例教程-preview-1

買這商品的人也買了...

商品描述

這是一本講解Sketch圖標與UI界面設計的實例教程。
全書根據日常生活中移動App界面的常見功能,分類講解UI圖標與界面設計的技巧與方法。
全書共6章,以案例的形式分別講解了圖標設計、引導頁設計、主頁設計、
圖表頁設計、個人中心頁設計及登錄頁設計。
針對圖標的設計,分為線性圖標、扁平圖標和擬物圖標的繪製;針對界面的設計,
分為插畫類型的引導頁、不同功能的主頁、色感強烈的圖表頁、
不同形式的個人中心頁及不同風格的登錄頁的製作。
本書實戰案例均配有拓展練習,同時提供了案例設計源文件及一套獨立視頻課程,
目的是幫助UI設計學習者了解和掌握UI設計的規範、配色思路及具體的設計方法,
同時使有一定UI設計經驗的人得到提升。
本書適合UI設計初學者、有一定設計經驗的UI設計師和交互設計師閱讀。

作者簡介

陳曉歷(Kiki)

曾參與《爸爸去哪兒》《宮爆老奶奶》手游UI項目設計,
以及《火影疾風壇》網頁遊戲項目設計。曾負責“星巴克”小程序設計項目。
搜狗簽約皮膚設計師,作品多次被UI中國首頁推薦。  

目錄大綱

目錄:  
第1章圖標設計017  
1.1實戰:繪製一套日記App的線性圖標018  
1.1.1繪製“私信”圖標018  
1.1.2繪製“定位”圖標020  
1.1.3繪製“相機”圖標020  
1.1.4繪製“分享”圖標022  
1.1.5繪製“對話”圖標023  
1.1.6繪製“心”圖標024  
1.1.7繪製“個人”圖標026  
1.1.8繪製“支付”圖標026  
1.1.9繪製“鬧鐘”圖標027  
1.1.10繪製“Wi-Fi”圖標028  
1.1.11繪製“點贊”圖標029  
1.1.12繪製“圖片”圖標031  
1.1.13繪製“購物車”圖標032  
1.1.14繪製“刪除”圖標033  
1.1.15繪製“設置”圖標035  
1.1.16繪製“手機”圖標036  
1.1.17繪製“放大鏡”圖標037  
1.1.18繪製“天氣”圖標038  
1.1.19繪製“鎖”圖標039  
1.1.20繪製“包”圖標040  
拓展練習:繪製一套線性圖標041  
1.2實戰:繪製一套社交App的扁平圖標042  
1.2.1繪製“相機”圖標042  
1.2. 2繪製“旋轉”圖標045  
1.2.3繪製“圓形”圖標047  
1.2.4繪製“聊天”圖標048  
1.2.5繪製“閃電”圖標049  
1.2.6繪製“多色氣泡”圖標050  
拓展練習:繪製一個扁平化圖標052  
1.3實戰:繪製一套工具類型的擬物圖標053  
1.3.1繪製“鐘錶盤”圖標054  
1.3.2繪製“按鈕”圖標058  
1.3.3繪製“漸變色開關”圖標062  
1.3. 4繪製“相機”圖標067  
拓展練習:繪製一個擬物圖標078  

第2章引導頁設計079  
2.1實戰:“心溝通”引導頁的製作080  
2.1.1繪製背景080  
2.1.2繪製圖形裝飾背景080  
2.1 .3繪製心形圖案081  
2.1.4添加文字082  
2.1.5繪製翻頁元素082  
2.1.6製作立體效果083  
拓展練習:繪製一個以實物圖為背景的引導頁083  
2.2實戰:“愛護鯨魚”引導頁的製作084  
2.2.1繪製背景084  
2.2.2繪製鯨魚087  
2.2.3繪製橋頭089  
2.2.4繪製小女孩091  
2.2.5添加倒影092  
2.2.6添加文字和斜線093  
2.2.7製作立體效果093  
拓展練習:繪製一個“鯨魚”主題的引導頁093  
2.3實戰:“海上日出”引導頁的製作094  
2.3 .1繪製波浪094  
2.3.2繪製太陽098  
2.3.3繪製浪花099  
2.3.4添加文字100  
2.3.5製作立體效果100  
拓展練習:繪製一個與案例同類型的引導頁100  
2.4實戰: “萌胖減重”引導頁的製作101  
2.4.1繪製海浪101  
2.4.2繪製救生圈103  
2.4.3繪製卡通人物104  
2.4.4添加小黃鴨106  
2.4.5添加文本107  
2.4.6製作立體效果108  
拓展練習:繪製一個“中秋賞月”主題的引導頁108  

第3章主頁設計109  
3.1實戰:相機主頁的製作110  
3.1.1繪製背景110  
3.1.2繪製操作欄圖標111  
3.1.3製作立體效果112  
拓展練習:繪製一個黑色效果的相機主頁112  
3.2實戰:酷炫音樂播放器主頁的製作113  
3.2.1繪製背景113  
3.2.2編輯圖片113  
3.2.3繪製狀態欄和操作欄的圖標114  
3.2.4繪製播放器115  
3.2.5製作立體效果117  
拓展練習:繪製一個紫色炫酷類型的播放器主頁117  
3.3實戰:音樂播放器主頁的製作118  
3.3.1繪製背景118  
3.3.2編輯圖片118  
3.3.3繪製頂部操作欄119  
3.3.4繪製播放器120  
3.3.5製作立體效果121  
拓展練習:繪製一個極簡風格的播放器主頁121  
3.4實戰:微故事主頁的製作122  
3.4.1繪製背景122  
3.4.2繪製標題122  
3.4.3繪製卡片123  
3.4.4製作立體效果124  
拓展練習:繪製一個卡片類型的電影App主頁124  
3.5實戰:推薦文章主頁的製作125  
3.5.1繪製背景125  
3.5.2繪製頁邊125  
3.5.3繪製狀態欄126  
3.5.4繪製底部操作欄126  
3.5 .5添加正文126  
3.5.6製作立體效果128  
拓展練習:繪製一個圖文混排的好文章分享App主頁128  
3.6實戰:直播App主頁的製作129  
3.6.1繪製背景129  
3.6.2繪製操作欄圖標129  
3.6.3製作立體效果132  
拓展練習:繪製一個漸變效果的視頻剪輯App主頁132  

第4章圖表頁設計133  
4.1實戰:簡約水波圖表頁的製作134  
4.1.1繪製背景134  
4.1.2繪製頂部水紋134  
4.1.3繪製定界框並放入圖標136  
4.1.4繪製圓圈部分圖標136  
4.1.5添加文本138  
4.1.6繪製底部列表139  
4.1.7完善細節140  
4.1.8製作立體效果141  
拓展練習:繪製一個漸變發光效果的數據圖表頁141  
4.2實戰:漸變互動指數圖表頁的製作142  
4.2.1繪製背景142  
4.2.2繪製定界框143  
4.2.3添加文本143  
4.2.4繪製指數圖部分144  
4.2.5製作立體效果145  
拓展練習:繪製一個藍紫色的圖表頁145  
4.3實戰:漸變活力評分圖表頁的製作146  
4.3.1繪製背景146  
4.3.2繪製操作欄148  
4.3.3繪製圓環部分148  
4.3.4繪製卡片部分149  
4.3.5製作立體效果153  
拓展練習:繪製一個極簡風格的圖表頁153  
4.4實戰:漸變業績圖表頁的製作154  
4.4.1繪製背景154  
4.4.2繪製狀態欄154  
4.4.3繪製卡片部分155  
4.4.4繪製列表156  
4.4.5製作立體效果158  
拓展練習:繪製一個卡片樣式的圖表頁158  

第5章個人中心頁設計159  
5.1實戰:居中形式的個人中心頁製作160  
5.1.1繪製背景160  
5.1.2繪製定界框160  
5.1.3繪製用戶信息161  
5.1.4添加圖標162  
5.1.5添加數據信息162  
5.1.6添加底部圖片163  
5.1.7製作立體效果164  
拓展練習:繪製一個居中形式的個人中心頁164  
5.2實戰:側邊形式的個人中心頁製作165  
5.2.1繪製背景165  
5.2.2繪製定界框165  
5.2.3添加用戶頭像166  
5.2.4添加文本166  
5.2.5製作立體效果167  
拓展練習:繪製一個側邊欄樣式的個人中心頁167  
5.3實戰:斜邊形式的個人中心頁製作168  
5.3.1繪製背景168  
5.3.2繪製定界框169  
5.3.3繪製圖標170  
5.3.4添加用戶信息170  
5.3.5繪製列表171  
5.3.6添加按鈕172  
5.3.7製作立體效果173  
拓展練習:繪製一個左對齊形式的個人中心頁173  
5.4實戰:中心展示類的個人中心頁製作174  
5.4.1製作用戶信息174  
5.4.2製作列表信息175  
5.4.3繪製“提示”按鈕175  
5.4.4繪製“關閉”按鈕176  
5.4.5製作立體效果176  
拓展練習:繪製一個中心展示形式的個人中心頁176  

第6章登錄頁設計177  
6.1實戰:時尚不規則卡片登錄頁的製作178  
6.1. 1繪製背景178  
6.1.2繪製卡片179  
6.1.3繪製定界框179  
6.1.4添加登錄信息180  
6.1.5添加細節180  
6.1.6製作立體效果181  
拓展練習:繪製一個極簡登錄頁181  
6.2實戰:極簡風格登錄頁的製作182  
6.2.1繪製背景182  
6.2.2添加導航欄信息182  
6.2.3繪製頭像183  
6.2.4繪製“相機”圖標183  
6.2.5繪製列表184  
6.2.6繪製按鈕184  
6.2.7製作立體效果185  
拓展練習:繪製一個極簡風格的卡片登錄頁185  
6.3實戰:透氣建築風格登錄頁的製作186  
6.3.1繪製背景186  
6.3.2繪製定界框188  
6.3.3添加裝飾色塊188  
6.3.4添加登錄信息188  
6.3.5添加按鈕188  
6.3.6製作立體效果189  
拓展練習:繪製一個建築風格的登錄頁189  
6.4實戰:漸變小彈框登錄頁的製作190  
6.4.1繪製背景190  
6.4.2繪製卡片190  
6.4. 3添加文本191  
6.4.4製作立體效果192  
拓展練習:繪製一個卡片類型的登錄頁192