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

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

系的一系列操作過(guò)程。

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

1.流程圖的常用符號(hào)意義：

圖8-1流程圖的常用符號(hào)意義

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

一般我們?cè)趯?xiě)產(chǎn)品需求文檔的時(shí)候，我們需要設(shè)計(jì)流程圖，一般一個(gè)PRD里面會(huì)由幾個(gè)大的主

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

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

圖片示例：圖8-2 一個(gè)注冊(cè)頁(yè)面的通用流程圖

圖8-2 一個(gè)注冊(cè)頁(yè)面的通用流程圖

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

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

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

3.誰(shuí)來(lái)使用這個(gè)功能？（目標(biāo)用戶）

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

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

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

主要包括：

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

計(jì)策略。

二.手繪線框圖

1.頁(yè)面功能模塊的劃分

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

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

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

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

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

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

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

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

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

2.手繪線框，可以買(mǎi)專門(mén)的手繪線框本，然后鐵皮的手繪線框原型鋼尺。

圖8-3原型鋼尺

圖8-4 原型工作小組

圖8-5手繪原型

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

分配到各個(gè)頁(yè)面上。

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

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

類APP版式非常熟悉，

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

表、社交、購(gòu)物車(chē)、照片庫(kù)、側(cè)滑、搜索、地圖、社區(qū)、對(duì)話框、精品推薦等。

十二類常見(jiàn)APP頁(yè)面導(dǎo)航:

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

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

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

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

作。

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

數(shù)。

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

菜單。

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

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

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

要上下翻很久。

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

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

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

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

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

看。

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

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

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

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

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

能即可。

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

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

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

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

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

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

圖8-8、APP常見(jiàn)交互手勢(shì)

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

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

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

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

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

的時(shí)候,多推敲下，盡量讓頁(yè)面視覺(jué)效果又好看，交互操作又方便合理。

圖8-9健身APP線框

圖8-10金融APP線框

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

圖8-12金融APP線框

總結(jié)

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

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