移動端APP UI設計與互動基礎教程(微課版)

移動端APP UI設計與互動基礎教程(微課版)

《移動端APP UI設計與互動基礎教程(微課版)》是2020年2月人民郵電出版社出版的圖書,作者是吳豐。

基本介紹

  • 中文名:移動端APP UI設計與互動基礎教程(微課版)
  • 作者:吳豐
  • ISBN:9787115501844
  • 頁數:143頁
  • 定價:49.8元
  • 出版社:人民郵電出版社
  • 出版時間:2020年2月
  • 裝幀:平裝
  • 開本:16開
內容簡介,圖書目錄,

內容簡介

第1章講述UI相關設計理念與基本概念;第2章講解UI崗位中與軟體使用相關的主要操作方法;第3章講解移動端界面中還會遇到的其他類型的組件;第4章講解UI工作流程中,原型圖的繪製方法和基本概念;第5章講解APP設計規範,並按照產品開發流程,設計並實現整個APP效果圖;第6章將設計稿轉化為手機端的效果;第7章以實訓的方式,讓讀者從頭至尾再走一遍流程,加深學習記憶,提高團隊協作能力。

圖書目錄

第1章 APP UI設計與互動概述 001
1.1 UI設計行業的發展前景 002
1.1.1 認識相關概念 002
1.1.2 就業前景 003
1.2 如何學習UI設計 004
1.2.1 UI 設計師的常用軟體介紹 004
1.2.2 UI 設計師的設計理論知識儲備 006
1.3 UI設計理論基礎 006
1.3.1 色彩三要素 006
1.3.2 UI 設計配色基礎 婚巴007
1.4 APP頁面分類及其作品欣賞 009
1.5 淺析APP產品開發流程 013
1.6 職場經驗分享 015
1.7 學阿頌戰習反思 016
第2章 UI圖示設計 017
2.1 初識移動設備尺寸及其相關概念 018
2.1.1 px、pt 和ppi 等相關概念 018
2.1.2 iPhone 機型螢幕尺寸規格 018
2.2 UI圖示設計 019
2.2.1 圖示的分類 019
2.2.2 常見存儲格式與圖示尺寸 021
2.2.3 APP 啟動圖示的常見創意設計方法 022
2.3 線性圖示 023
2.3.1 線性圖示概述 023
2.3.2 線性圖示的製作(Wi-Fi 圖示) 024
2.3.3 課堂鞏固練習(Keep圖示) 026
2.4 剪影類圖示 026
2.4.1 剪影類圖示概束匙應述 026
2.4.2 剪影類圖示的製作(抖音APP 圖示) 027
2.4.3 課堂鞏固練習(微信圖示) 030
2.5 扁平化與長陰影類圖示 030
2.5.1 知識點概述 030
2.5.2 扁平化與長陰影類圖示的製作(指南針圖示) 031
2.5.3 課堂鞏固練習(一組扁平化圖示) 034
2.6 擬物類圖示的製作 035
2.6.1 知識概述 035
2.6.2 擬物類圖示的製作(木紋質感翻頁日曆) 035
2.6.3 課堂鞏固練習(擬物齒輪) 040
2.7 學習反思 041
第3章 常見APP組件的設計與實現 043
3.1 UI Kit概述 044
3.2 按鈕 044
3.2.1 按鈕概述 044
3.2.2 按鈕的按壓狀態 046
3.2.3 按鈕的種類 046
3.2.4 按鈕的設計要點 048
3.2.5 扁平化按鈕的製作 049
3.2.6 質感按鈕的製作 050
3.2.7 課堂鞏固練習(水晶按鈕) 055
3.3 滑動條 055
3.3.1 扁平滑動條的製作 055
3.3.2 質感滑動條的製作 056
3.3.3 課堂鞏固練習(QQ音樂播放器) 059
3.4 表單 059
3.4.1 表單結構與設計要點 059
3.4.2 單選按鈕與複選框的製作 061
3.4.3 文本框與下拉框的製作 063
3.4.4 課堂鞏固練習
(反饋頁表單) 064
3.5 數據圖表 065
3.5.1 認識數據圖表 065
3.5.2 數據圖表的製作 067
3.5.3 課堂鞏固練習(環形數據圖表棕堡茅鍵) 071
3.6 學習反思 072
第4章 互動設計與原型圖繪製 073
4.1 初識互動設計 074
4.1.1 互動設計概述 074
4.1.2 產品開發中的層級關係 075
4.1.3 相關工作經驗 076
4.2 初識產品原型 077
4.3 原型製作工具——Axure RP 078
4.3.1 Axure RP界面認知 078
4.3.2 Axure RP基本操作 079
4.3.3 繪製手機原型存放於自己的元件庫 081
4.3.4 多頁面鞏固練習(金融類APP原型圖繪紙轎拳簽制) 083
4.4 Axure RP常見的互動套用 084
4.4.1 頁面跳轉 084
4.4.2 引導頁左右滑動效果 085
4.4.3 長頁面上下滾動效果 088
4.4.4 彈出訊息框效果說組盼 090
4.4.5 側邊欄選單滑入效果 093
4.4.6 表單驗證與登錄互動 095
4.5 學習反思 099
第5章 APP界面設計與實戰 100
5.1 認識APP應用程式及其相關概念 101
5.1.1 常見術語 101
5.1.2 常見手機螢幕尺寸 103
5.2 設計規範灑辯提 106
5.2.1 iOS設計規範 106
5.2.2 Android設計規範 107
5.2.3 邊距與間距 108
5.2.4 內容布局 110
5.2.5 常用顏色 111
5.3 APP項目實戰——“UI社”APP產品設計與實現 111
5.3.1 產品定位與背景簡要分析 111
5.3.2 競品分析 112
5.3.3 “UI社”產品架構梳理 117
5.3.4 繪製低保真原型圖 118
5.3.5 “UI社”APP的視覺規範 119
5.3.6 APP產品啟動圖示的製作 121
5.3.7 “引導頁”效果圖製作 121
5.3.8 “登錄頁”效果圖製作 122
5.3.9 “首頁”效果圖製作 122
5.3.10 “發現頁”效果圖製作 123
5.3.11 “上傳頁”效果圖製作 123
5.3.12 “動態頁”與“動態詳情頁”效果圖製作 123
5.3.13 “我的頁”效果圖製作 124
5.3.14 其他頁面效果圖 125
5.4 學習反思 126
第6章 標註與切圖 128
6.1 標註 129
6.1.1 標註工具介紹 129
6.1.2 Markman(馬克鰻)的使用方法 130
6.1.3 標註哪些信息 132
6.1.4 “UI社”APP項目“引導頁”標註 132
6.1.5 “UI社”APP項目“登錄頁”標註 133
6.1.6 “UI社”APP項目“首頁”標註 134
6.1.7 “UI社”APP項目“教程列表頁”標註 134
6.2 切圖 135
6.2.1 切圖概述 135
6.2.2 圖片資源命名規範 136
6.2.3 切圖工具——Cutterman 136
6.2.4 iOS平台與Android平台下的切圖 137
6.2.5 點9圖 140
6.3 學習反思 142
第3章 常見APP組件的設計與實現 043
3.1 UI Kit概述 044
3.2 按鈕 044
3.2.1 按鈕概述 044
3.2.2 按鈕的按壓狀態 046
3.2.3 按鈕的種類 046
3.2.4 按鈕的設計要點 048
3.2.5 扁平化按鈕的製作 049
3.2.6 質感按鈕的製作 050
3.2.7 課堂鞏固練習(水晶按鈕) 055
3.3 滑動條 055
3.3.1 扁平滑動條的製作 055
3.3.2 質感滑動條的製作 056
3.3.3 課堂鞏固練習(QQ音樂播放器) 059
3.4 表單 059
3.4.1 表單結構與設計要點 059
3.4.2 單選按鈕與複選框的製作 061
3.4.3 文本框與下拉框的製作 063
3.4.4 課堂鞏固練習
(反饋頁表單) 064
3.5 數據圖表 065
3.5.1 認識數據圖表 065
3.5.2 數據圖表的製作 067
3.5.3 課堂鞏固練習(環形數據圖表) 071
3.6 學習反思 072
第4章 互動設計與原型圖繪製 073
4.1 初識互動設計 074
4.1.1 互動設計概述 074
4.1.2 產品開發中的層級關係 075
4.1.3 相關工作經驗 076
4.2 初識產品原型 077
4.3 原型製作工具——Axure RP 078
4.3.1 Axure RP界面認知 078
4.3.2 Axure RP基本操作 079
4.3.3 繪製手機原型存放於自己的元件庫 081
4.3.4 多頁面鞏固練習(金融類APP原型圖繪製) 083
4.4 Axure RP常見的互動套用 084
4.4.1 頁面跳轉 084
4.4.2 引導頁左右滑動效果 085
4.4.3 長頁面上下滾動效果 088
4.4.4 彈出訊息框效果 090
4.4.5 側邊欄選單滑入效果 093
4.4.6 表單驗證與登錄互動 095
4.5 學習反思 099
第5章 APP界面設計與實戰 100
5.1 認識APP應用程式及其相關概念 101
5.1.1 常見術語 101
5.1.2 常見手機螢幕尺寸 103
5.2 設計規範 106
5.2.1 iOS設計規範 106
5.2.2 Android設計規範 107
5.2.3 邊距與間距 108
5.2.4 內容布局 110
5.2.5 常用顏色 111
5.3 APP項目實戰——“UI社”APP產品設計與實現 111
5.3.1 產品定位與背景簡要分析 111
5.3.2 競品分析 112
5.3.3 “UI社”產品架構梳理 117
5.3.4 繪製低保真原型圖 118
5.3.5 “UI社”APP的視覺規範 119
5.3.6 APP產品啟動圖示的製作 121
5.3.7 “引導頁”效果圖製作 121
5.3.8 “登錄頁”效果圖製作 122
5.3.9 “首頁”效果圖製作 122
5.3.10 “發現頁”效果圖製作 123
5.3.11 “上傳頁”效果圖製作 123
5.3.12 “動態頁”與“動態詳情頁”效果圖製作 123
5.3.13 “我的頁”效果圖製作 124
5.3.14 其他頁面效果圖 125
5.4 學習反思 126
第6章 標註與切圖 128
6.1 標註 129
6.1.1 標註工具介紹 129
6.1.2 Markman(馬克鰻)的使用方法 130
6.1.3 標註哪些信息 132
6.1.4 “UI社”APP項目“引導頁”標註 132
6.1.5 “UI社”APP項目“登錄頁”標註 133
6.1.6 “UI社”APP項目“首頁”標註 134
6.1.7 “UI社”APP項目“教程列表頁”標註 134
6.2 切圖 135
6.2.1 切圖概述 135
6.2.2 圖片資源命名規範 136
6.2.3 切圖工具——Cutterman 136
6.2.4 iOS平台與Android平台下的切圖 137
6.2.5 點9圖 140
6.3 學習反思 142

相關詞條

熱門詞條

聯絡我們