技術(shù)資訊
界面設(shè)計中的Pattern
2008-11-16 17:25:00
什么是Pattern呢?
Pattern,我們可以把它看做是一組可重復(fù)使用、被大多數(shù)人知曉、蘊含設(shè)計經(jīng)驗小結(jié)的界面交互模式。這些模式可能適用于桌面軟件、Web應(yīng)用、手機(jī)應(yīng)用等等。
這里我們通過分析兩個Pattern應(yīng)用的實例,來更好的理解Pattern和運用Pattern。
雙面板Pattern
用來承載對象與對象內(nèi)容的兩個面板,用戶選擇【對象面板】后,【對象內(nèi)容面板】會自動顯示該對象的詳細(xì)信息。
Microsoft Outlook2007
適用范圍
郵件、歌曲庫、圖片庫、主從數(shù)據(jù)記錄、文件管理器等。
優(yōu)點
1、對象與對象內(nèi)容同時可視;
2、避免了頁面切換和更多的鼠標(biāo)點擊操作,節(jié)省體力;
3、減輕用戶記憶負(fù)擔(dān),用戶不需要去記憶【對象內(nèi)容】的存在位置;
4、支持上、下方向鍵的快速瀏覽,有效減少瀏覽時間。
如何使用
根據(jù)用戶的視覺流動方向,可將【對象面板】與【對象內(nèi)容面板】左右、上下排布。當(dāng)用戶選中【對象面板】時,【對象內(nèi)容】面板及時刷新。
案例
如上圖:在Web軟件應(yīng)用中,可將基礎(chǔ)資料類(幣別、部門、職員)數(shù)據(jù)的錄入與查詢整合為”雙面板模式”,上面用做【數(shù)據(jù)輸入?yún)^(qū)】,下面列表用做【數(shù)據(jù)展示區(qū)】。鼠標(biāo)單擊【數(shù)據(jù)展示區(qū)】即可在【數(shù)據(jù)輸入?yún)^(qū)】完成數(shù)據(jù)修改。
此方案充分利了用雙面板Pattern的優(yōu)勢,并進(jìn)行了擴(kuò)展。用戶的反饋效果還是不錯的!
————————————————————————————————-
畫布+工具條Pattern
畫布+帶圖標(biāo)的工具條,通過畫布旁的工具條來創(chuàng)建、修改畫布對象。
適用范圍
圖形編輯、文字編輯
優(yōu)點
1、 一張畫紙和一支畫筆,現(xiàn)實生活到軟件界面的自然映射,符合用戶心智模型;
2、 通過使用工具條可以對復(fù)雜的操作進(jìn)行分類,方便用戶使用。
如何使用
可根據(jù)用戶習(xí)慣將工具條放置在畫布上、左、右邊,工具條一定要提供表意明確的圖標(biāo)(或增加文字描述)來幫助用戶識別。
案例
如上圖:在SnagIt9.0當(dāng)中,將原有的工具條改為微軟的Ribbon,并在界面底部增加了”捕捉庫”操作區(qū)。在PhotoShop中進(jìn)行多圖切換時需要使用Ctrl+Tab快捷鍵,而在SnagIt9.0″捕捉庫區(qū)域”既能看到多圖的縮略,又能很方便的通過鼠標(biāo)點擊進(jìn)行切換。這個在畫布+工具條Pattern的基礎(chǔ)上增加了 “捕捉區(qū)”的擴(kuò)展,更加方便了用戶進(jìn)行多圖的切換
通過上面兩個案例,我們可以了解到界面設(shè)計中的Pattern是什么?我們該如何利用已有的Pattern去更好的設(shè)計界面?好的Pattern有很多,這里沒法一一列舉。有興趣的話可以自己分析研究一下其他pattern。
原文:http://www.kdued.com/2008/11/%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1%E4%B8%AD%E7%9A%84pattern/
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-04-01 13:56:00] 界面爛還是界面設(shè)計爛?
- [2009-02-15 09:47:00] 10個有用的技術(shù)改進(jìn)你的用戶界面設(shè)計
- [2008-05-09 14:02:00] 《Designing Interfaces》讀書筆記(2)設(shè)計模式
- [2014-11-14 09:13:42] 給力的網(wǎng)站UI登陸界面設(shè)計制作
- [2008-05-09 14:04:00] 《Designing Interfaces》讀書筆記(1)
- [2008-10-21 08:59:00] 關(guān)于網(wǎng)站界面設(shè)計的案例分析資源
- [2008-07-04 14:58:00] 軟件界面設(shè)計要素——視覺識別
- [2008-06-12 13:59:00] 界面設(shè)計是應(yīng)該本地化還是國際化?
- [2013-02-01 09:46:12] 用戶體驗與網(wǎng)頁界面設(shè)計
- [2009-02-17 08:44:00] 從SNS看社會化界面設(shè)計(一)
- [2013-12-09 23:35:57] 圓形效果在界面設(shè)計上的應(yīng)用與分析
- [2008-08-22 11:37:00] 界面設(shè)計測試規(guī)范
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
GOOGLE 青島高端網(wǎng)站建設(shè) 插畫 高端網(wǎng)站設(shè)計 頁面設(shè)計 青島網(wǎng)站優(yōu)化 青島網(wǎng)站建設(shè)基礎(chǔ)知識 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 網(wǎng)站的速度 青島高端網(wǎng)站建設(shè)公司哪家好 集團(tuán)公司網(wǎng)站建設(shè) SEO優(yōu)化 企業(yè)網(wǎng)站 網(wǎng)站SEO robots 網(wǎng)站設(shè)計資訊 HTML5 青島黃島、紅島網(wǎng)站建設(shè)公司 海信網(wǎng)絡(luò)科技 html和css 圖形網(wǎng)格 色彩心理學(xué) 網(wǎng)站建設(shè)的步驟有哪些 青島網(wǎng)頁設(shè)計 青島輪胎網(wǎng)站設(shè)計 青島好的網(wǎng)站優(yōu)化公司 手機(jī)網(wǎng)站 網(wǎng)站品牌 網(wǎng)站動畫 IT資訊