史上最全面的界面設計模式、APP和Web交互流程圖整理

這一次,設計夾的主編-曉黑同學為大家整理了史上最全面的APP和Web交互流程圖的標準畫法,非常的全面,結合的自己的項目經驗,把交互流程圖做的更加清晰,在後面,還為大家整理一般的web設計模式及APP設計模式,以便使得我們的設計過程更加的高效。

信息架構圖對於一個產品起到了至關重要的作品,產品越複雜,信息架構越重要,比如淘寶APP這種體量的產品,信息架構做的是否合理,直接關係著產品的邏輯,及運行效率,所以對於產品的信息架構在做創意設計階段就需要考慮去清楚。


先來看下基本的信息架構圖的形式,如下圖,有些圖的小編就不解釋了,如果看不清楚的話,點擊放大觀看,在看不清,那就到設計夾的網站(www.sezign.com)下載高清圖


APP交互流程表達

APP 交互流程圖的表達方式,在這裡包括了界面的之間的信息流動連接,還有非常的重要的交互設計說明,我們在平時的做設計的時候,一定要養成良好的標註習慣,設計的過程中,需要把所有用戶操作的可能性都要考慮清楚才行。




Web交互流程圖表達
對於Web呢,信息架構一般會比APP信息架構要複雜的多,因為Web端能夠承載的信息量更大,可兼容的程序更加的複雜,所以對於企業級的網站或者軟體,比如微軟的OFFICE辦公軟體,就是一個非常非常複雜的信息架構圖,每一個功能組件的交互邏輯,構成了整體,而且要是每一塊的內容協調好,這是相當的不容易的。


下面這些圖,都是我們一般性的交互流程表達,同樣的情況,也是需要表達清楚信息流之間的關係,及每一部分信息說明,這個在平時接觸項目時就應該養成規範的習慣,繪制交互流程圖的時候。

APP一般常用的界面設計模式
界面模式非常重要,他是在經過很多次驗證總結出來的結果,對於界面設計的應用呢,可以很快的產出產品的原型,以便能夠快速的迭代。



Web一般常用的界面設計模式
界面模式非常重要,他是在經過很多次驗證總結出來的結果,對於界面設計的應用呢,可以很快的產出產品的原型,以便能夠快速的迭代。

至於這些圖,小編我就不解釋了,相信大家都能夠看懂

來源:設計夾    編輯:Halley

本文版權歸原作者所有
轉載請註明原作者及出處授權發布

微交互 細節設計成就卓越產品長按,識別二維碼,加關注

微交互微信號:microinteraction

關注我們

QQ群4:460012855

QQ群3:310747025

QQ群2:422363882

QQ群1:332539941

新浪微博:@微交互


閱讀原文


關於作者:
分享交互經驗,提升產品用戶體驗。幫助您打造優秀產品。細節設計成就卓越產品。

微信號:Microinteraction