用戶體驗(yàn)設(shè)計新人自學(xué)包之控件學(xué)習(xí)

0 評論 9392 瀏覽 59 收藏 8 分鐘

隨著互聯(lián)網(wǎng)行業(yè)的逐漸成熟,用戶體驗(yàn)設(shè)計師也成了炙手可熱的“熱門職業(yè)”。近年來,設(shè)計專業(yè)的高校教育也漸漸從傳統(tǒng)的實(shí)體產(chǎn)品設(shè)計傾斜或引入用戶體驗(yàn)的概念。畢業(yè)后仍從事設(shè)計行業(yè)的學(xué)生數(shù)量大大增加,同時半道出家的設(shè)計新人人數(shù)也在不斷上升。小可不才,在此結(jié)合自己多年的設(shè)計經(jīng)驗(yàn)送給設(shè)計新人十五字真言:夯實(shí)基本功!夯實(shí)基本功!夯實(shí)基本功!

扎實(shí)的基石乃高樓之保證。設(shè)計之路亦是如此。以用戶體驗(yàn)設(shè)計新人為例,一般來講,必須修煉的基本功,即本自學(xué)包包括但不限于:控件庫;操作流程;信息架構(gòu)等。

本系列名曰設(shè)計新人自學(xué)包,可供用戶體驗(yàn)新人自主學(xué)習(xí),在掌握了所有自學(xué)包的內(nèi)容之后,可以輕松拿下初級設(shè)計師崗面試中的設(shè)計技能考核的部分。本文將就第一部分控件學(xué)習(xí)進(jìn)行深入講解。

yonghutiyan1

各種控件

控件(或部件,widget或control)是一種圖形用戶界面元素,其顯示的信息排列可由用戶改變,例如視窗或文本框。控件定義的特點(diǎn)是為給定數(shù)據(jù)的直接操作(direct manipulation)提供單獨(dú)的互動點(diǎn)??丶且环N基本的可視構(gòu)件塊,包含在應(yīng)用程序中,控制著該程序處理的所有數(shù)據(jù)以及關(guān)于這些數(shù)據(jù)的交互操作。——https://zh.wikipedia.org/wiki/控件

控件對于設(shè)計來說就是搭建時最基礎(chǔ)的積木塊,每種積木塊有著不同的外觀也承載著不同的功能。對于每種控件的深入了解是做設(shè)計的前提,最簡的學(xué)習(xí)方法就是學(xué)習(xí)windows控件庫(當(dāng)然也選擇其他平臺控件庫入手學(xué)習(xí))。Windows控件庫是我們最熟悉(熟悉到就像一種習(xí)慣)的控件,此外,它所覆蓋的范圍也足夠廣泛,在之后的不同控件庫對比之時,也容易觸類旁通。推薦一些參考:《About Face 4:? 交互設(shè)計精髓》的第3部分交互細(xì)節(jié);UXGuide上的Windows用戶體驗(yàn)交互設(shè)計規(guī)范;各平臺的設(shè)計規(guī)范等等。在這里推薦一個私藏網(wǎng)站——UXGuide,此站由民間個人發(fā)起,雖已好久沒有更新,但是現(xiàn)有的內(nèi)容卻依然有很高的前期學(xué)習(xí)價值。

首先,選擇控件庫

選擇一個控件庫的規(guī)范作為教科書進(jìn)行學(xué)習(xí),可以是我這里推薦UXGuide上的Windows用戶體驗(yàn)交互設(shè)計規(guī)范,也可以是其他的控件庫。

第二, 學(xué)習(xí)控件

撰寫每一類控件的詳細(xì)交互規(guī)范和細(xì)節(jié)設(shè)計說明。這一步其實(shí)就是自學(xué)記筆記,不同的設(shè)計規(guī)范中對于控件的定義方式不盡相同,有些言簡意賅有些更偏向于編程實(shí)現(xiàn)有些有些是可怕的裹腳布。你可以選擇你認(rèn)為對設(shè)計有強(qiáng)指導(dǎo)幫助的部分進(jìn)行強(qiáng)化學(xué)習(xí)。何為強(qiáng)指導(dǎo)幫助,即在你不確定如何選擇控件或該控件需要設(shè)計幾套狀態(tài)的時候,你一看這些內(nèi)容就可以基于此給出一個可用版本的設(shè)計。

yonghutiyan2

以我當(dāng)年的自學(xué)筆記之進(jìn)度條為例

第三,填充案例庫

案例庫需要你廣泛收集不同產(chǎn)品的界面案例,從中提取分析windows控件在產(chǎn)品中的應(yīng)用規(guī)范,大多數(shù)的時候案例是正面的,而有時候你會發(fā)現(xiàn),一些產(chǎn)品上對控件的使用卻是個扎扎實(shí)實(shí)的反面案例。在收集案例的時候,建議以正面案例為主,以正三觀,分析為何在此處使用該控件,是否符合規(guī)范,是否可以用其他的控件代替以及為什么。除去一眼即明的控件樣式,很多的產(chǎn)品界面的控件已經(jīng)有了很多風(fēng)格化的變種,然而刨去變異,每一個控件依然可以劃歸到基礎(chǔ)控件類目中。如果不行,那就回過頭去鞏固第二步。

yonghutiyan3

依然是我的筆記截圖,當(dāng)時在游戲公司實(shí)習(xí),所以案例都是游戲啦

第四,產(chǎn)品界面分析練習(xí)

在完成了上述三步之后,找一些優(yōu)秀產(chǎn)品進(jìn)行界面分析,就某一具體界面進(jìn)行思考:該界面使用了哪些控件,哪些控件組合,有沒有更好的組合可以代替現(xiàn)有的組合。

yonghutiyan4

以上圖的注冊界面為例,在這個所有人都很熟悉的界面上,出去文本,包括了:A-鏈接(使用模式:任務(wù)鏈接);B、C-文本輸入框;D-命令按鈕;E-復(fù)選框(使用模式:單個選項(xiàng));F-鏈接(使用模式:導(dǎo)航鏈接);G-命令按鈕(使用模式:標(biāo)準(zhǔn)命令按鈕)

關(guān)于控件庫的學(xué)習(xí)就先講到這里。

在所有的自學(xué)任務(wù)中,控件庫的學(xué)習(xí)和整理可能是最枯燥的事,一個控件可能就會耗費(fèi)幾小時甚至更久,然而,它所帶來的技能成長也是最立竿見影的(自我設(shè)計時有最基本的依據(jù);討論細(xì)節(jié)時有最基本的理據(jù);看其他設(shè)計師不爽時,可以拷問ta最基本的根據(jù);也可以隨口冒出一些術(shù)語偶爾裝裝逼等等等等)。同時,你也建成了一個自己的控件資源庫,可以隨時填充進(jìn)去你覺得有意思的設(shè)計案例,以做未來設(shè)計之參考。

 

作者: ?Clara

來源:點(diǎn)融設(shè)計中心DDC (公眾號ID:DR_DDC)

本文由 @點(diǎn)融設(shè)計中心DDC ?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!