移動APP設計

1、設計流程

　　產品經理：需求，上傳下達

　　用研部：軟件的用戶體驗、人羣分類、市場調研、同類競爭

　　交互設計部：畫交互原型圖

　　　　①預留位置，引領設計師進行設計

　　　　②注清頁面的層級與鏈接關係

　　　　③展現頁面的基本樣貌，以供審覈及修改

　　視覺組：平面、網頁、界面、視頻

　　前端工程師

　　後臺工程師

　　app：適應點與盈利點

2、圖標設計

　　一、圖標分類

　　　　剪影圖標（單行圖標）：只有形狀

　　　　扁平化圖標：形狀和顏色

　　　　擬物化圖標：形狀、顏色和質感

　　　　2D、3D圖標：

　　　　　　2D：扁平化可是沒有投影

　　　　　　3D：相對於擬物化圖標有更加真實的細節，更加精緻的質感

　　二、設計流程

　　　　圖形搭建：比例

　　　　顏色填充：同一色系

　　　　材質添加

　　三、圖層樣式：投影

　　　　樣式添加：

　　　　　　單面有效果：影

　　　　　　雙面有效果：斜面和浮雕

　　　　　　四周有效果：光

　　　　浮嵌效果：

　　　　　　內嵌：內陰影+投影  上暗下亮

　　　　　　外浮：內陰影+投影  上亮下暗

　　四、圖標統一性問題

　　　　造型：規則形狀、不規則形狀

　　　　風格：剪影、扁平化、擬物化

　　　　顏色：

　　　　　　天然顏色：事物原本的顏色

　　　　　　情感色：天然中沒法用符號代替的有我的情感的（受衆、企業文化、我的理解）

　　　　樣式：全局光，通常爲90°；個別光

3、界面設計

　　一、界面設計方法

　　　　①若是頂部條有質感：頂部和底部相同；若是頂部條爲白色：底部條爲白色/灰色，圖標爲線性圖標，點擊高亮後爲色塊圖標；若是頂部條不是白色，則底部條爲白色/淺灰色

　　　　②字體

　　　　③內部的圖片展現（參考值）

　　　　　　1:2  通常首頁通欄

　　　　　　4:3  正文的圖片展現

　　　　　　斐波拉契：1:1:2:3:5:8:13:......≈0.618  （黃金分割比）

　　　　　　16:9 / 16:10  人體視覺比例

　　二、板式

　　　　空間要透氣、元件之間距離要統1、佈局要統一

　　三、界面設計流行

　　　　SCS：惟一色調  simple color schemes

　　　　CS：卡片式  cards（瀑布流）

　　　　CF：內容惟一  content first

　　　　CD：圓形設計  circle design

　　四、交互形式

　　　　①列表式結構  底部條菜單

　　　　②側滑分欄  個性APP（簡單）

　　　　③瀑布流  內容單一，信息量大

　　　　④旋轉木馬  內容較少，設計感強

　　　　⑤九宮格  內容區分明顯

　　五、顏色搭配

　　　　底色：70~80%

　　　　主色：15~20%

　　　　強調色：5%

　　　　輔助色：5%

4、APP分析

　　新聞APP：

　　　　看新聞

　　　　看視頻

　　　　看圖片

　　　　我的功能：分享、評論、收藏、訂閱、天氣、空氣質量

　　　　軟件功能：黑夜模式、字體大小、離線下載、清除緩存

　　社交APP：

　　　　loading頁：logo（反映軟件的定位）

　　　　顏色：藍色

　　　　軟件的功能（適應性、盈利性）：

　　　　　　適應性：

　　　　　　　　社交（聊天）、交友：加爲好友、刪除功能、聊天/歷史記錄、我的設置

　　　　　　　　加爲好友：帳號查找、附近的人（開定位）、高級搜索、掃二維碼、搖一搖、通信錄

　　　　　　　　刪除功能：刪除痕跡、黑名單

　　　　　　　　聊天/歷史記錄：查找歷史記錄、刪除記錄

　　　　　　　　我的設置：頭像、個籤、相冊、姓名、性別、愛好（篩選機制）

　　　　　　盈利性：

　　　　　　　　針對軟件的功能定位

　　　　　　　　虛擬的階段：互贈虛擬禮物、排行榜、虛擬商城、互動遊戲（對比性，軟件粘性、增長互動、盈利的延展）

　　　　　　　　實體階段：形象的包裝、形象的推薦