今天被jobs指出之前工作的方向性錯(cuò)誤,才意識(shí)到構(gòu)成最終產(chǎn)品元素之間的層級(jí)關(guān)系.

在現(xiàn)在的工作流程中,規(guī)范是大家熟知也都盡力執(zhí)行的,目的是為了在保證產(chǎn)出物質(zhì)量和一致性的同時(shí),提高設(shè)計(jì)和工作的效率.不過(guò)規(guī)范還是由更基礎(chǔ)的兩個(gè)元素構(gòu)成:基礎(chǔ)控件和基礎(chǔ)組件.

交互設(shè)計(jì)元素的層級(jí)

控件是互聯(lián)網(wǎng)/軟件產(chǎn)品的最小界面元素,包括按鈕,單選框,復(fù)選框,滾動(dòng)條等等。

而組件,是通過(guò)合理的組合和布局方式形成的比較通用,好用的控件組合。

最終的設(shè)計(jì)規(guī)范,則是由成熟的組件組成的,是組件的組合。

所以最終產(chǎn)品的質(zhì)量,離不開(kāi)規(guī)范,組件及控件.不過(guò)產(chǎn)品設(shè)計(jì)發(fā)展到現(xiàn)在,需要再加入另外一個(gè)元素:”動(dòng)畫”或者叫”過(guò)程控件”.名字暫時(shí)還沒(méi)有想好,具體的例子如下:

• 蘋果登錄界面在用戶輸錯(cuò)密碼的反饋方式:整個(gè)登錄框會(huì)震動(dòng),這個(gè)交互方式被很多人贊嘆,也被slideshare移植到web層面(不過(guò)不知道為啥現(xiàn)在不用了….)
• 蘋果窗口在最小化的”扭曲”,windows中最小化窗口時(shí)的動(dòng)態(tài)縮小
• 現(xiàn)在頁(yè)面上通過(guò)javascript實(shí)現(xiàn)的越來(lái)越多的漸變效果

而蘋果在官方的開(kāi)發(fā)者指南中對(duì)這點(diǎn)也有獨(dú)到的看法:交互中動(dòng)畫的作用不只是炫,而是為了讓(界面上的或者其他的元素)”變化”過(guò)程更平滑,同時(shí)讓變化更直接,更簡(jiǎn)單的方式告知用戶,理解變化.可以想象面對(duì)新用戶時(shí)，點(diǎn)擊窗口的最小化按鈕，窗口直接消失，用戶會(huì)多詫異。不過(guò)現(xiàn)在幾乎沒(méi)有專門對(duì)這個(gè)層面進(jìn)行設(shè)計(jì)，最接近的應(yīng)該是AS方向的“互動(dòng)設(shè)計(jì)師”，這也得益于flash在動(dòng)畫方面的成熟和強(qiáng)大。

所以現(xiàn)在看，良好的交互設(shè)計(jì)應(yīng)該是從良好的控件設(shè)計(jì)開(kāi)始，同時(shí)也已經(jīng)有很成熟系統(tǒng)的知識(shí)可以借鑒了：About face 3，雖然這本書主要講解的都是客戶端產(chǎn)品的控件設(shè)計(jì)。由控件到組件，最后形成完整高效的規(guī)范。

創(chuàng)新的基礎(chǔ)控件

各大公司關(guān)于基礎(chǔ)控件的創(chuàng)新也都沒(méi)有停止過(guò)，這些創(chuàng)新也總是讓人覺(jué)得很驚喜，對(duì)于基礎(chǔ)控件的改良真的是需要深厚的經(jīng)驗(yàn)和設(shè)計(jì)能力作為基礎(chǔ)的

Google Wave推出時(shí)，確實(shí)引起不少熱議，其中關(guān)于“滾動(dòng)條”的創(chuàng)新也讓很多人贊嘆，同時(shí)進(jìn)行了細(xì)致的分析

google首頁(yè)的文字鏈尺寸，不知道有多少人注意過(guò)，應(yīng)該是為了加大可點(diǎn)擊區(qū)域

這個(gè)是我很喜歡的，確實(shí)沒(méi)想到過(guò)下拉菜單可以做這樣的擴(kuò)展：除了可選項(xiàng)又加入了按鈕，猜測(cè)是借鑒了Web層面上Facebook之前的“相冊(cè)＋上傳”的這種“導(dǎo)航菜單＋動(dòng)作”設(shè)計(jì)方式

這個(gè)文案很到位，是國(guó)外某個(gè)下載網(wǎng)站的按鈕，說(shuō)實(shí)話，點(diǎn)這個(gè)按鈕的時(shí)候多少還是有些別扭的，文案的作用不可忽視

最后就是itunes新版中對(duì)于窗口控制按鈕的縱向排列

Google在折騰基礎(chǔ)控件方向作了很多的工作，貌似也很樂(lè)衷于此，也讓我們有了更多參考學(xué)習(xí)的機(jī)會(huì)。

其實(shí)最終也可以總結(jié)一些經(jīng)驗(yàn)：對(duì)于基礎(chǔ)控件的創(chuàng)新，更多的是在做整合，減少界面上元素的數(shù)量，更真實(shí)正確的表達(dá)信息及功能的層級(jí)；或者是按照使用習(xí)慣，重要性，邏輯性等來(lái)改變?cè)氐呐帕蟹绞?/p>

源地址：http://pd4.me/blog/idea/b……tive_control/