時(shí)間:2013-02-16 來源:武漢網(wǎng)whw.cc 作者:whw.cc 我要糾錯(cuò)
網(wǎng)頁制造Webjx文章簡介交互設(shè)計(jì)師常用的web設(shè)計(jì)模式.
交互設(shè)計(jì)師在設(shè)計(jì)線框圖原型時(shí),熟知常見的web設(shè)計(jì)模式很有贊助,做到“成竹在胸&rdquo,網(wǎng)站推廣;才干發(fā)明出合乎需要,用戶易學(xué)易用的界面來。所謂“不必要反復(fù)發(fā)現(xiàn)輪子”,模式往往輕易解決常見問題,準(zhǔn)確的模式能幫用戶熟習(xí)界面、進(jìn)步效力。
常見的UI設(shè)計(jì)模式如下圖
下面分辨進(jìn)行詳細(xì)剖析,碰到不同需要的時(shí)候就可以取舍適合UI設(shè)計(jì)模式。
01.主體/細(xì)節(jié)Master/Detail模式
主體/細(xì)節(jié)模式能夠分為橫向跟縱向兩種。假如想讓用戶在統(tǒng)一頁面下,領(lǐng)導(dǎo)他們在類目下高效地切換,這無疑是一種幻想的方法。假如主體信息對(duì)用戶來說更主要,最好取舍橫向布局;蚴侵黧w局部不僅條目多而且包括信息也多,那也該抉擇這種橫向布局。
舉例來說
Windows窗口屬于縱向排布
Mac mail的橫向排布
0.2分欄閱讀
分欄閱讀也分為橫向跟縱向兩種。用戶能夠通過它,挑選不同的種別點(diǎn)進(jìn)并逐漸引誘用戶找到須要的信息。
舉例
Outlook采取逐級(jí)分欄的界面,用戶可以抉擇進(jìn)入“收件箱”——>“某封收件”——>“詳細(xì)郵件內(nèi)容”
0.3搜索/結(jié)果
搜索屏幕模式對(duì)于想疾速、直接看到詳細(xì)成果的用戶來說無比便捷。從很簡略的到十分龐雜的都有。
Gmail采取簡略搜索
而對(duì)google學(xué)術(shù)的用戶,高等搜尋限定更龐雜的搜尋前提會(huì)提煉出用戶更冀望得到的信息。
0.4過濾數(shù)據(jù)組
分為橫向和縱向。開端定義一些已知信息,之后通過限定前提對(duì)搜索后的成果進(jìn)行再過濾。
51job用戶在使用簡單搜索輸入所需職位后,縱向布局的左邊面板提供諸如“宣布時(shí)光、薪金”等條件,進(jìn)一步優(yōu)化信息
以京東為例,多數(shù)電子商務(wù)網(wǎng)站在用戶初步含混搜索后,供給進(jìn)一步優(yōu)化的過濾條件。上圖中,京東采用的是橫向排列方法
0.5表單
表單類型眾多,也是最能體現(xiàn)用戶休會(huì)是否良好的處所。其中包括良多內(nèi)容,推舉專門先容表單的書《Web Form Design Filling in the Blanks》。
注冊信息個(gè)別使用表單
0.6調(diào)色盤/畫布
調(diào)色盤/畫布固然不算最常見模式,但它對(duì)于發(fā)明圖形類文檔有著不可替換的上風(fēng)好比設(shè)計(jì)線性或非線性圖;流程圖;頁面布局;制訂物理大小的設(shè)計(jì)/圖表或節(jié)制布局。
對(duì)于設(shè)計(jì)師來說調(diào)色盤/畫布這種模式并不生疏,常用軟件,例如Axure、ps都是采用這種方式。
0.7儀表盤
一個(gè)設(shè)計(jì)完美的儀表盤應(yīng)供給高深莫測的癥結(jié)信息,實(shí)時(shí)數(shù)據(jù),易讀的圖形和操作,清楚的進(jìn)口和瀏覽。實(shí)踐上講,在一個(gè)屏幕下展現(xiàn)復(fù)雜的數(shù)據(jù)自身就很難。
之前我用水晶易表為蘇寧電器做的實(shí)時(shí)監(jiān)控各個(gè)地域門店銷售體系儀表盤
0.8電子表格
便利用戶快捷瀏覽,編輯大板塊信息的幻想模式。電子表格需要提供下列功效尺度的表格諸如分類,暗藏/顯示 欄目,重列欄目,分組如果可以,全局撤銷/重做,增長/插入/刪除排,鍵盤導(dǎo)航,導(dǎo)入和導(dǎo)出。
淘寶購物車挑選使用電子表格,可以讓用戶對(duì)已選商品進(jìn)行疾速編輯增添/減少數(shù)目,網(wǎng)頁設(shè)計(jì),刪除等
0,程式編寫.9向?qū)?/p>
對(duì)于復(fù)雜的或是不常見的流程,向?qū)?快捷啟動(dòng)屏幕模式可以有效地導(dǎo)航。
京東上使用wizard倏地引誘不熟習(xí)流程的顧客實(shí)現(xiàn)付款
0.10.Q&A
Q&A模式是指用戶通過選取相符條件,從而自主找到合適本人的解決計(jì)劃。Q&A不同于搜索模式,它通常需要懂得用戶基本上,通過發(fā)問來輔助用戶弄清他們?nèi)鄙俳逃?xùn)的在哪里比方健康保險(xiǎn),典質(zhì),打算,購置有哪些可供的選擇或倡議。
挪動(dòng)資費(fèi)導(dǎo)購系統(tǒng)可以讓用戶通過答復(fù)多少個(gè)問題,可以提議用戶選擇哪種話費(fèi)套餐
0.11.平行面板
平行面板屏幕模式可以收起一次只顯示一個(gè),也可以開展同時(shí)顯示全體。這種模式合適組織大批相似或彼此影響的信息,讓用戶在統(tǒng)一頁面更高效的取得信息。最佳運(yùn)用在需要申請(qǐng)者需要填寫各種不次序的種別目錄。
0.12.交互模型
交互模型屏幕模式利用在許多交互因素須要與要害名目比方日歷、輿圖、圖標(biāo)、畫布等進(jìn)行交互的時(shí)候。是一種用戶休會(huì)更貼近用戶心智模型的模式。在日歷、輿圖、線狀圖、預(yù)設(shè)可能場景剖析包括盤算器,所見即所得編纂器包含處置時(shí)運(yùn)用后果異常好。
Google的calendar在日歷上可以直接編纂提醒內(nèi)容
附加13.空白狀態(tài)
空缺狀態(tài)指在任何數(shù)據(jù)輸入或進(jìn)入體系前,利用的天然狀況。Getting real 一書曾說空白狀態(tài)的屏幕使得用戶更等待。通過給用戶一種預(yù)覽來下降擔(dān)憂、懊喪和遲疑。空缺狀況屏幕包含視頻,倏地教程,輔助提醒,裝置后的截圖。
Wufoo是一個(gè)在線表單設(shè)計(jì)網(wǎng)站,初始后會(huì)領(lǐng)導(dǎo)用戶樹立表單
14.其余模式
還有兩種普遍應(yīng)用但在企業(yè)軟件很少應(yīng)用的模式。
門戶如果你是市場調(diào)研專家,貿(mào)易需求分析師和用戶反饋調(diào)研員設(shè)計(jì)門戶,可以參考把持面板的設(shè)計(jì)標(biāo)準(zhǔn)和案例。
Tabs實(shí)在Tab是一種部件,不是一種模式。它為在多種同語境下的數(shù)據(jù)提供多選一選擇。如果數(shù)據(jù)構(gòu)造導(dǎo)致你的設(shè)計(jì)tab顯得良多。有兩個(gè)小倡議第一,從新斟酌架構(gòu)。通過使用卡片分類或求教一名專業(yè)的信息架構(gòu)師;第二,可以參考平行面板的標(biāo)準(zhǔn)和案例。
參考文獻(xiàn)《Designing interfaces》and 《Designing web interfaces》
本文轉(zhuǎn)自:http://www.kanitech***.hk/
標(biāo)簽:
幣安app官網(wǎng)下載 虛擬手機(jī)號(hào)碼 歐億 手機(jī)app軟件下載 幣安app官網(wǎng)下載 幣安app官網(wǎng)下載 幣安app官網(wǎng)下載 幣安app官網(wǎng)下載
關(guān)于我們 | 打賞支持 | 廣告服務(wù) | 聯(lián)系我們 | 網(wǎng)站地圖 | 免責(zé)聲明 | 幫助中心 | 友情鏈接 |
Copyright © 2022 whw.cc Inc. All Rights Reserved. 武漢網(wǎng) 版權(quán)所有
鄂ICP備19009404號(hào)-6 公安備 42010502000112