自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

設計師初學必備寶典 繪制交互流程圖

移動開發(fā) 移動應用
學習產品設計初期肯定會遇到兩個問題:第一,如何考慮更全面;第二,如何繪制交互流程圖。本文將介紹如何繪制交互流程圖。

學習產品設計初期肯定會遇到兩個問題:第一,如何考慮更全面;第二,如何繪制交互流程圖。開始產品設計前先要考慮所有可能性,如何才能以線性流程圖的方法組織所需的設計元素。

流程圖是產品經理和交互設計都必須掌握的技能,一張流程圖可以省去需求文檔和交互設計文檔的很多文字描述,讓技術人員一目了然地明白設計意圖,便于組織程序的邏輯順序。

繪制流程圖準從簡單的原則,流程圖是設計師的產出物,體現設計意圖,主要給技術人員和測試人員瀏覽,至于自己是如何思考不應體現在流程圖中。別人也要早點回家被老婆,沒有時間關心你如何的細心的考慮,也不關心用戶會如何思考和操作的,請直接給他們展示設計的結果。

復雜和糾結留給自己,簡單留給別人。對用戶是這樣,對工作同伴也是如此。

 

手機程序開機檢查更新的流程圖

圖例1:手機程序開機檢查更新的流程圖

流程圖包括以下圖形

◆矩形表示交互環(huán)節(jié)

◆菱形表示問題判斷

◆箭頭表示工作流方向

也有用圓角矩形表示“開始”和“結束”,個人一般不要該圖形,因為從上而下的線性流程圖。最頂部的圖形或者箭頭開始的部分是流程圖的“開始”,如圖例中,開啟程序觸發(fā)了事件,程序開始檢查更新;最底部的圖形或者箭頭終止的部分是流程圖的“結束”,如重啟程序和不再提示表示本次事件結束,無須以圖形區(qū)分表示“開始”和“結束”。

流程圖容易和操作步驟混淆,比如《交互設計表格》中的登錄框操作步驟是:

◆點擊登錄,彈出登錄框

◆點擊用戶名輸入框,輸入用戶名

◆點擊密碼輸入框,輸入密碼

點擊登錄

操作步驟是用戶正常情況下完成某項操作所需的操作,而交互流程圖(嚴格意義上叫程序流程圖)表達是執(zhí)行邏輯的路徑,通俗地將是當用戶點擊某個按鈕之后,程序執(zhí)行命令的順序。更復雜的系統流程圖可用于產品架構。

當用戶點擊的登錄框之后,文字描述程序執(zhí)行的順序:

檢查用戶名是否為空。如為空,提醒用戶“請您輸入用戶名”。如果用戶名設置要輸入手機號碼,還要檢查手機號碼是否是否以13/15/18開頭的11位數字。

檢查密碼是否為空。如為空,提醒用戶“請您輸入密碼”。

檢查用戶名是否是已用賬戶。程序提交數據與服務器數據進行比對。如果不是,提醒用戶“用戶名不正確”。疑問:用戶名有誤和不存在是如何判斷的?

檢查密碼是否與賬戶匹配。如錯誤,提醒用戶“密碼輸入不正確”。

現多數登錄框將4和3合并,只提醒“用戶名或密碼不正確”,可能是告知用戶過于準確的信息之后會增加盜號風險。

 

wap站驗證用戶手機號碼 

圖例2,wap站驗證用戶手機號碼

 

【編輯推薦】

  1. 移動開發(fā)產品設計分析:各大移動平臺的消息通知
  2. 移動終端設備產品登錄頁面設計理念
  3. 軟件開發(fā)前期設計時的注意事項
責任編輯:張攀 來源: 曉生博客
相關推薦

2023-08-23 19:21:38

流程圖時序圖UML

2020-07-28 21:38:24

跨職能流程圖

2012-02-15 09:35:17

程序員

2019-07-31 11:10:59

Java流程圖框架

2011-06-21 15:12:23

交互設計UI設計

2009-06-04 15:51:46

Struts流程圖

2019-08-05 09:45:59

數據庫MySQLSQL

2014-10-09 10:22:19

交互設計

2020-07-28 21:42:23

程序流程圖

2011-07-29 10:12:45

2011-08-27 13:28:15

愛普生噴墨打印機

2024-01-09 08:00:00

人工智能工具設計師

2010-06-18 09:05:04

UML交互圖

2011-09-07 09:55:25

2020-07-28 21:44:23

工藝流程圖

2010-03-24 15:36:18

2024-08-16 18:48:45

2016-06-23 07:22:25

Web設計師模型工具

2021-08-02 09:16:03

Figma插件UI
點贊
收藏

51CTO技術棧公眾號