當我們開始設計一款APP的原型時缀旁，應該遵從的設計步驟是什么记劈？總結一下自己首次設計APP的思路步驟，以期自己對原型的設計認知能更規(guī)范化并巍、流程化目木。

一、定框架

一款APP應該有固定的上導航懊渡、下導航和尺寸大小刽射，基于這個思路军拟，在開始畫頁面之前，應先定好上導航誓禁、下導航和原型尺寸懈息。

1.上導航：上導航位于頁面的頂部，一般組成有三部分摹恰，左按鈕辫继、頁面標題、右按鈕俗慈。

A.左按鈕一般為“返回”上一級的功能姑宽，用于告訴用戶怎么回去之前的路；

B.頁面標題則居中顯示闺阱，為當前頁面的名稱炮车，告訴用戶當前在哪；

C.右按鈕一般為操作區(qū)酣溃，用于隱藏一些針對當前頁面的操作示血、全局操作等，一般設計為抽屜導航救拉，以節(jié)省頁面空間和統(tǒng)一設計。

2.下導航：下導航位于頁面底部瘫拣，由四到五個標簽組成亿絮，點擊標簽，用戶可方便地在不同頁面間來回切換麸拄。一般將應用中最重要的幾個功能模塊抽象出來后派昧，形成下導航標簽。

3.原型尺寸：原型尺寸的確定取決于APP目標用戶使用設備的分辨率拢切。此處需調(diào)查兩份數(shù)據(jù)：

A.設計一份簡單的在線調(diào)查蒂萎，面向目標用戶收集到他們的設備使用情況.其中iPhone使用率占49.57%，華為使用率占比18.48%淮椰，之外五慈，OPPO和vivo分別占比12.6%和11.34%，小米占比7.9%主穗；

B.查閱Android和iOS設備分辨率占比情況：

綜合兩份數(shù)據(jù)泻拦，將應用支持的分辨率確定為：安卓 1920 x 1080，ios? 1334*750忽媒，應支持的系統(tǒng)版本：安卓適配4.4及以上争拐，ios適配8.0及以上。

根據(jù)屏幕分辨率的定位晦雨，結合在網(wǎng)上查找的一些資料架曹，最終確定原型尺寸為375*667隘冲。

有了上導航、下導航和尺寸绑雄，app的框架就定下來了展辞，頁面的設計就是往這個框架里面塞內(nèi)容了。為了提高效率绳慎，將框架制成母版纵竖，做到在所有頁面的復用和統(tǒng)一：

二、定全局

一款應用中杏愤，每個模塊或頁面都要用到的功能靡砌，可以抽象出來做成全局功能，一是可以達到一次設計珊楼，全局適用的效果通殃，提高原型設計的速度；二是防止每次遇到都交代厕宗，導致同樣的功能画舌，設計不一樣。根據(jù)業(yè)務的需要已慢，抽象出的全局功能有：

除了全局功能曲聂，保持操作和反饋的一致性，是對用戶友好佑惠、降低用戶學習成本的最基本要求朋腋。為此定義應用的全局規(guī)范，包括：

其中反饋包括操作反饋（錯誤反饋膜楷、操作成功提示旭咽、操作確認等）、頁面加載反饋（刷新提示赌厅、加載中穷绵、加載失敗、全部加載等）特愿、頁面狀態(tài)反饋（無網(wǎng)絡仲墨、請求失敗、加載失敗揍障、無內(nèi)容宗收、頁面不存在等）

這一塊會跟UI設計師一起確定，并形成適合公司的標準規(guī)范亚兄，設計成公司組件庫混稽，方便各個項目之間復用。

三、畫頁面

頁面框架定好了匈勋，全局規(guī)范定好了礼旅，最后就剩下設計具體的頁面了。在設計具體的頁面時洽洁，用狀態(tài)去指導設計不僅讓自己的思路很清楚痘系，不會遺漏功能，在交付給其他團隊成員的時候饿自，也更容易理解和溝通汰翠。

如此，在設計每一個頁面時昭雌，應先梳理這個頁面涉及的業(yè)務操作流程：

然后根據(jù)操作流程抽象出不同的操作狀態(tài)遷移圖：

根據(jù)不同的狀態(tài)复唤，此處至少應輸出：包裹創(chuàng)建中的頁面、保存為草稿的頁面烛卧、創(chuàng)建失敗的頁面佛纫、創(chuàng)建成功的頁面；其中創(chuàng)建包裹時总放，又可以細分出操作流程呈宇，如選擇倉庫、選擇sku局雄、選擇物流方式甥啄，根據(jù)這個流程又劃分出不同的狀態(tài)，畫出不同的頁面炬搭。如此一層層細分蜈漓，直到所有業(yè)務邏輯劃分完成。這樣做的好處是尚蝌，流程清晰、操作邏輯清晰充尉，不容易遺漏細節(jié)飘言。

四、輸出原型

最后驼侠，將產(chǎn)品的來龍去脈姿鸿、用戶等簡介信息與操作頁面融合起來，整理出完整的文檔倒源，目錄脈絡是這樣的：

因第一次負責移動端產(chǎn)品苛预，沒有經(jīng)驗和成熟的思路指導，在設計的過程中走了很多彎路：

一是盲目下手笋熬，沒有充分利用網(wǎng)絡上的資源热某，比如在搭建頁面框架的時候，其實已經(jīng)有成熟的組件可直接使用，只要按需改一下文字名稱即可昔馋，比如antdesign這個網(wǎng)站上就有很完善的mobile筹吐、web端的組件庫可供下載，充分利用可大大提高原型設計效率秘遏。

二是沒有確定固定的表達模式（如按狀態(tài)劃分頁面丘薛，說明業(yè)務規(guī)則），導致每個功能表達方式不一致邦危，又不得不花費時間和精力調(diào)整洋侨。

三是沒有仔細研究和學習iOS和Android的官方design guide，導致有一些設計不符合規(guī)范倦蚪，看起來不像一款移動端應用的設計希坚，更像web端。

靜下來總結思考审丘，其實每件事情都有幾乎接近標準的實施步驟吏够，有了這個步驟的指導，當你拿到相關任務的時候滩报，就不會感覺無從下手了锅知。