一.流程圖設(shè)計(jì)

流程圖(Flow Chart)：用圖示的方式反映出特定主體為了滿足特定需求而進(jìn)行的有特定邏輯關(guān)

系的一系列操作過程。

流程圖的四種基本結(jié)構(gòu)：順序結(jié)構(gòu)，條件結(jié)構(gòu)(又稱選擇結(jié)構(gòu))，循環(huán)結(jié)構(gòu)，分支結(jié)構(gòu)。

1.流程圖的常用符號意義：

圖8-1流程圖的常用符號意義

2,軟件業(yè)務(wù)流程圖設(shè)計(jì)

一般我們在寫產(chǎn)品需求文檔的時候，我們需要設(shè)計(jì)流程圖，一般一個PRD里面會由幾個大的主

流程圖+幾個子模塊的流程圖構(gòu)成。

主流程圖不需要很詳細(xì)，只要描述大概的通用操作流程。而在具體業(yè)務(wù)模塊下，再去設(shè)計(jì)詳細(xì)的角色操作流程圖。流程圖設(shè)計(jì)完后，先切分業(yè)務(wù)模塊，然后繪制線框圖。

圖片示例：圖8-2 一個注冊頁面的通用流程圖

圖8-2 一個注冊頁面的通用流程圖

作為制定一項(xiàng)交互設(shè)計(jì)工作計(jì)劃的開端，我們可以從探尋以下幾個問題開始。

1.為什么要做這個功能？（業(yè)務(wù)目的）

2.產(chǎn)品期望得到怎樣的成果？（業(yè)務(wù)目標(biāo)）

3.誰來使用這個功能？（目標(biāo)用戶）

4.他們?yōu)槭裁匆褂眠@個功能？（用戶需求、體驗(yàn)?zāi)繕?biāo)）

5.如何讓他們都來使用這個功能？（行為設(shè)計(jì)）

在了解這幾個問題的基礎(chǔ)上，逐步展開一系列的動作，有序落實(shí)交互設(shè)計(jì)的前期工作計(jì)劃。

主要包括：

1、分析業(yè)務(wù)需求一＞2、分析用戶需求一＞3、分解關(guān)鍵因素一＞4、歸納設(shè)計(jì)需求，明確設(shè)

計(jì)策略。

二.手繪線框圖

1.頁面功能模塊的劃分

根據(jù)產(chǎn)品需求確定模塊劃分，和頁面內(nèi)容，為視覺和研發(fā)提供設(shè)計(jì)和開發(fā)標(biāo)準(zhǔn)。

線框圖設(shè)計(jì)要素：界面內(nèi)容、元素布局、優(yōu)先順序、關(guān)聯(lián)分組。

線框圖要做到：結(jié)構(gòu)：將產(chǎn)品的各個頁面放到一起。

內(nèi)容：頁面顯示內(nèi)容是什么？

信息層次：如何組織和展示這些信息？

（布局）功能：頁面如何工作，完成任務(wù)？

（視覺順序）行為：與用戶如何交互？

它是如何運(yùn)轉(zhuǎn)的？線框圖設(shè)計(jì)步驟：明確該頁面功能和任務(wù)確定設(shè)計(jì)頁面所需信息內(nèi)容對頁面

信息內(nèi)容進(jìn)行布局調(diào)整頁面元素細(xì)節(jié)（尺寸，定位等）。

2.手繪線框，可以買專門的手繪線框本，然后鐵皮的手繪線框原型鋼尺。

圖8-3原型鋼尺

圖8-4 原型工作小組

圖8-5手繪原型

手繪線框，一般在產(chǎn)品功能需求文檔做完，功能拓?fù)鋱D及重要流程設(shè)計(jì)完畢，然后開始把功能

分配到各個頁面上。

有一些敏捷式開發(fā)時，會讓設(shè)計(jì)師，一邊討論一邊繪制手繪線框，手繪線框圖的優(yōu)勢是，可以

用最小的成本探討設(shè)計(jì)可行性等問題。所以，設(shè)計(jì)師平時應(yīng)該多使用APP競品，使得自己對各

類APP版式非常熟悉，

APP中比較重要的頁面有注冊、登錄、首頁、個人中心、設(shè)置、導(dǎo)航分類、播放器、各種列

表、社交、購物車、照片庫、側(cè)滑、搜索、地圖、社區(qū)、對話框、精品推薦等。

十二類常見APP頁面導(dǎo)航:

圖8-6十二種特色APP導(dǎo)航

A、底部導(dǎo)航：釆用文字加圖標(biāo)的方式展現(xiàn)。一般有3?5個標(biāo)簽，大部分APP選用這種導(dǎo)航，

優(yōu)點(diǎn)是可以不迷路的在各個模塊中切換，缺點(diǎn)是會分割頁面內(nèi)容，占有一定的底部空間。

B、頂部導(dǎo)航：優(yōu)點(diǎn)適用于較多的分類卡片，可以左右滑動，隱藏更多功能，缺點(diǎn)是需要2手操

作。

C、舵式導(dǎo)航：優(yōu)點(diǎn)是可以把常用功能或者重要功能居中醒目顯示，缺點(diǎn)是圖標(biāo)熟練只能單

數(shù)。

D、瓦片式導(dǎo)航：優(yōu)點(diǎn)簡約而不簡陋，導(dǎo)航清晰、明顯。缺點(diǎn)：進(jìn)入模塊后，要退出才能回到

菜單。

E、列表式：優(yōu)點(diǎn)可以對內(nèi)容非常多的數(shù)據(jù)進(jìn)行不斷加載滑動，缺點(diǎn)是單調(diào)容易引起疲勞。

F、彈出菜單：優(yōu)點(diǎn)是形式節(jié)省空間新穎，缺點(diǎn)是需要猜測和記憶內(nèi)部功能。

G、瀑布流：優(yōu)點(diǎn)是圖片展示類可以一直下滑視覺效果好，缺點(diǎn)是要找之前滑過去的圖片，需

要上下翻很久。

H、卡片翻轉(zhuǎn)：優(yōu)點(diǎn)是視覺效果好，動感強(qiáng)。

I、側(cè)滑菜單：抽屜導(dǎo)航指的是一些功能菜單按鈕隱藏在當(dāng)前頁面后，點(diǎn)擊入口或側(cè)滑即可像

拉抽屜一樣拉出菜單。這種導(dǎo)航設(shè)計(jì)比較適合于那么不需要頻繁切換的次要功能，例如對設(shè)

置、關(guān)于、會員、皮膚設(shè)置等功能的隱藏。缺點(diǎn)是需要猜測和記憶被隱藏的功能。

J、時間軸：優(yōu)點(diǎn)是適合時間線發(fā)帖打卡性質(zhì)的頁面，缺點(diǎn)是頁面記錄信息有限,需要點(diǎn)入后查

看。

K、數(shù)據(jù)可視化：優(yōu)點(diǎn)適合各種數(shù)據(jù)圖表展示，缺點(diǎn)耗費(fèi)空間，并且開發(fā)繁瑣。

L、自由添加：優(yōu)點(diǎn)可以讓客戶自由定義功能模塊，缺點(diǎn)開發(fā)麻煩，客戶有學(xué)習(xí)成本。

3. APP線框設(shè)計(jì)（低保真原型設(shè)計(jì)）

線框圖一般分為，低保真，中保真，高保真。

低保真，一般文字加簡單的色塊線框，標(biāo)示出大概布局和功能即可，手繪或者AXURE自帶功

能即可。

中保真，基本加上了圖標(biāo)的形態(tài)，尺寸也比較精確，一些隱藏頁面和操作提示會在旁邊寫明，

擁有了簡單的邏輯跳轉(zhuǎn)。

高保真，基本和開發(fā)出來的上線版本80%?90%類似了，有細(xì)膩的跳轉(zhuǎn)動效，或者交互操作反

饋，基本就是沒連數(shù)據(jù)庫的ALPHA版。

圖8-7頁面之間的跳轉(zhuǎn)原型交互線框

4.常見APP交互跳轉(zhuǎn)手勢

圖8-8、APP常見交互手勢

UEgood學(xué)員APP線框作業(yè)展示，做線框要注意合理性，在保證頂部標(biāo)題欄狀態(tài)欄和底部導(dǎo)航

欄盡力按官方系統(tǒng)APP的尺寸外，可點(diǎn)擊區(qū)域不要小于44DP,也就是手指點(diǎn)擊盡量不要按到另

一個控件，出現(xiàn)誤操作。

同類功能和圖標(biāo)控件，使用一致的尺寸設(shè)計(jì)及同類控件集中在一起，不同的功能用不同的間距

隔開，顏色上，盡量使用5?7個色階區(qū)分功能塊。同類的頁面多去收集一些排版，在手繪線框

的時候,多推敲下，盡量讓頁面視覺效果又好看，交互操作又方便合理。

圖8-9健身APP線框

圖8-10金融APP線框

圖8-11 運(yùn)動APP線框

圖8-12金融APP線框

總結(jié)

以上是生活随笔為你收集整理的流程图虚线框表示什么_UI设计|APP的交互线框布局设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。