建站常識(shí)
網(wǎng)站交互設(shè)計(jì)-探源
2012-05-14 22:06:58
思維方式一:從“平面”到“舞臺(tái)”的設(shè)計(jì)
一位交互設(shè)計(jì)前輩曾說設(shè)計(jì)思維的局限有時(shí)在于太拘泥于面前的那個(gè)“方塊”,如果你把面前的二維方形界面轉(zhuǎn)化一個(gè)思維,將它翻轉(zhuǎn)一下,看成一個(gè)舞臺(tái),你需要的元素都是你的演員,什么時(shí)候轉(zhuǎn)場,什么時(shí)候出現(xiàn)那位角色,如何出現(xiàn)……很多事情都會(huì)豁然開朗。
其實(shí)這種思維方法,就把平時(shí)面對(duì)的二維交互界面更佳貼合用戶接觸的三維、四維空間,達(dá)到模擬現(xiàn)實(shí),增加用戶操作的感知和理解。
或許剛這樣說,可能還無法hold。舉個(gè)例子,在實(shí)際工作中,我們可能會(huì)和團(tuán)隊(duì)一起討論這個(gè)頁面是否應(yīng)該出現(xiàn)某功能,出現(xiàn)在哪里?以及這個(gè)功能元素如何出現(xiàn)??赡艽蠹覡幷摬恍?,誰也沒有特別能服眾的理由。其實(shí)這個(gè)時(shí)候就可以使用這種思維方法,把這個(gè)功能元素當(dāng)作演員,如果你是導(dǎo)演,那么這個(gè)演員應(yīng)該在:
何時(shí)出現(xiàn):用戶什么時(shí)候需要它?
演員在合適的時(shí)間來到合適的位置上,出現(xiàn)在哪里才不會(huì)影響主角的風(fēng)采,也足夠醒目呢:它的出現(xiàn)會(huì)影響我主要功能嗎?它的出現(xiàn)用戶可以感知到嗎?
它的出場是該漸漸顯露還是突然出現(xiàn)呢:轉(zhuǎn)場、跳轉(zhuǎn)、浮出還是彈出合適?
思維方式二:交互設(shè)計(jì)是關(guān)于“時(shí)間”的
上述的思維方式還幫助我們思考“何時(shí)出現(xiàn)”,這就是交互設(shè)計(jì)中非常重要的“時(shí)間線”的設(shè)計(jì)。設(shè)計(jì)都是有時(shí)間的,可能很多設(shè)計(jì)師包括我自己都經(jīng)常忽略到這點(diǎn)。用戶是從開始到最后有時(shí)間流逝活動(dòng)的對(duì)象,隨著時(shí)間的推移,交互介質(zhì)和交互場景都會(huì)發(fā)生轉(zhuǎn)化。即使同一個(gè)元素,不同時(shí)間狀態(tài)上展示的方式都應(yīng)該有所不同。關(guān)于這一點(diǎn)舉個(gè)簡單的例子你就會(huì)馬上明白。
appstore對(duì)于軟件的安裝中,你會(huì)發(fā)現(xiàn),當(dāng)你第一次安裝的時(shí)候,狀態(tài)顯示的是“免費(fèi)”,即向用戶表明這是一款什么性質(zhì)的app。當(dāng)已經(jīng)安裝但是有新的更新,則顯示“更新”,表示當(dāng)前app有更新,可以點(diǎn)擊更新。當(dāng)用戶已經(jīng)安裝最新版本后,則顯示置灰的“已安裝”,告訴用戶你已經(jīng)安裝過了,不用再操作了。置灰是防止用戶誤操作的好方法,這個(gè)在《容錯(cuò)性設(shè)計(jì)》中有描述這里就不多說啦。
思維方式三:創(chuàng)新
記得讀研的時(shí)候,做裝置藝術(shù)的一位導(dǎo)師說:“所謂設(shè)計(jì)的創(chuàng)新就是把本應(yīng)該大的東西做小,本應(yīng)該小的東西放大。”現(xiàn)在想來,其實(shí)可以擴(kuò)散開來,把一些常規(guī)的組合打散,把一些元素重新組合。擺脫常規(guī)就是一種創(chuàng)新。
比如之前看到的一個(gè)按鈕,把loading狀態(tài)和取消組合在一起了,這就不同于我們常見的長條狀進(jìn)度條,右側(cè)取消按鈕的模式。這種把不同元素重新組合一起就是一種創(chuàng)新啊。
思維方式四:
“術(shù)”的過程
這里的說的“術(shù)”,不僅包含交互設(shè)計(jì)的初期需要掌握快速原型的方法(紙上快速表現(xiàn)也不錯(cuò)哦),更多的是對(duì)常見交互模式的熟知。
如果你認(rèn)可:設(shè)計(jì)是用來解決問題的。交互設(shè)計(jì)往往為問題提供解決方案。那么,熟知已有的ui模式對(duì)于你用來解決常見問題非常有用。
例如,平行面板模式(手風(fēng)琴模式)可以收起(一次只顯示一個(gè)),也可以展開(同時(shí)顯示全部)。這種模式適合組織大量類似或相互影響的信息,讓用戶在同一頁面更高效的獲得信息。最佳應(yīng)用在:需要申請(qǐng)者需要填寫各種沒有順序的類別目錄。
更多關(guān)于設(shè)計(jì)模式的可以參考《常見UI設(shè)計(jì)模式》。除了這些平時(shí)需要多看不同的產(chǎn)品界面,接觸越多拿出手的才能越多。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢?
延伸閱讀
- [2012-05-12 01:59:21] 讓蘋果safari播放網(wǎng)頁視頻
- [2014-11-18 21:12:54] 如何提升一個(gè)網(wǎng)站用戶體驗(yàn)度
- [2012-05-14 22:00:30] 判斷瀏覽器客戶端類型(ipad,iphone,android)
- [2012-10-12 11:44:41] 根據(jù)用戶習(xí)慣的人性化網(wǎng)頁設(shè)計(jì)
- [2012-05-16 23:35:31] 新浪xweibo與ucenter通信
- [2014-11-04 10:28:46] 罕見設(shè)計(jì)創(chuàng)意的WEB網(wǎng)站導(dǎo)航方式
- [2020-11-18 14:21:25] 建設(shè)營銷型網(wǎng)站有什么注意事項(xiàng)?
- [2014-05-28 00:36:54] 微信社交圈營銷行為泛濫 清理迫在眉睫
- [2012-10-16 10:41:12] 什么是響應(yīng)式網(wǎng)站設(shè)計(jì)
- [2020-07-29 14:02:26] 青島網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)頁設(shè)計(jì)需要提供什么資料?
- [2016-02-14 23:01:22] 響應(yīng)式網(wǎng)站在企業(yè)網(wǎng)站中的應(yīng)用分析
- [2020-07-01 17:13:57] 對(duì)于中小型企業(yè),青島網(wǎng)站建設(shè)有哪些標(biāo)準(zhǔn)?
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
審美 輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)絡(luò)公司 青島網(wǎng)站設(shè)計(jì)哪家好 青島做網(wǎng)站多少錢 網(wǎng)站動(dòng)畫 robots 企業(yè)網(wǎng)站設(shè)計(jì) 空白和簡潔的設(shè)計(jì) 搜索引擎蜘蛛 青島flash網(wǎng)站 建站常識(shí) 青島網(wǎng)站營銷 新的元素 網(wǎng)站SEO 視覺靈感 青島高端網(wǎng)站建設(shè) H5 H5專題頁面 青島好的網(wǎng)站優(yōu)化公司 集團(tuán)性網(wǎng)站 色彩心理學(xué) IT資訊 網(wǎng)站改版 海信網(wǎng)絡(luò)科技 外貿(mào)網(wǎng)站設(shè)計(jì) 互聯(lián)網(wǎng) 青島網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)趨勢