ui設(shè)計(jì)的歷史進(jìn)程

　　我們現(xiàn)在使用的電腦顯示屏里的東西都是UI設(shè)計(jì)。從最初我們用的電子產(chǎn)品、軟件再到網(wǎng)站的建設(shè)，這些都屬于UI設(shè)計(jì)范疇，越來(lái)越多的企業(yè)也意識(shí)到UI設(shè)計(jì)的重要性了，同時(shí)也會(huì)考慮用戶使用感受，也就是用戶體驗(yàn)，可以說(shuō)喬布斯把用戶體驗(yàn)做到了極致，讓蘋(píng)果的產(chǎn)品在設(shè)計(jì)行業(yè)成為了一個(gè)標(biāo)桿。下面我們來(lái)了解一下UI設(shè)計(jì)的歷史吧。

　　在圖形用戶界面中，電腦畫(huà)面上顯示窗口、圖標(biāo)、按鈕等圖形表示不同目的的動(dòng)作，用戶通過(guò)鼠標(biāo)等指針設(shè)備進(jìn)行選擇。人機(jī)界面在工業(yè)界亦將傳統(tǒng)按鈕皮膚進(jìn)入到親切的觸控人機(jī)界面，在工業(yè)上的用戶接口簡(jiǎn)單的區(qū)分為Input(輸入)與Output(輸出)兩種，Input指的是由人來(lái)進(jìn)行機(jī)械或設(shè)備的操作，如把手、開(kāi)關(guān)、門(mén)、指令(命令)的下達(dá)或保養(yǎng)維護(hù)等，而Output指的是由機(jī)械或設(shè)備發(fā)出來(lái)的通知，如故障、警告、操作說(shuō)明提示等，好的人機(jī)界面會(huì)幫助用戶更簡(jiǎn)單、更正確、更迅速的操作機(jī)械，也能使機(jī)械發(fā)揮最大的性能并延長(zhǎng)使用壽命。
 

　　在經(jīng)歷了iPhone給我們帶來(lái)優(yōu)秀的用戶體驗(yàn)和界面后，我們開(kāi)始逐漸認(rèn)識(shí)一個(gè)新的工作崗位——UI設(shè)計(jì)。帶著一種新奇的狀態(tài)去了解，學(xué)習(xí)。市場(chǎng)對(duì)UI設(shè)計(jì)崗位需求的熱度持續(xù)，技術(shù)培訓(xùn)機(jī)構(gòu)也越來(lái)越多。學(xué)院派很難在浪潮之前供應(yīng)市場(chǎng)所需的人才，養(yǎng)料這么足，所以培訓(xùn)機(jī)構(gòu)如雨后春筍一樣瘋狂生長(zhǎng)，培訓(xùn)費(fèi)用水漲船高。
 

　　隨著時(shí)間的變化，市場(chǎng)經(jīng)過(guò)一輪洗牌，刷下很多互聯(lián)網(wǎng)企業(yè)，供需關(guān)系發(fā)生變化。很多小公司得到發(fā)展，開(kāi)始對(duì)UI設(shè)計(jì)人員的專(zhuān)業(yè)素質(zhì)要求提高，從培訓(xùn)班結(jié)業(yè)的很多設(shè)計(jì)師，涌入職場(chǎng)，崗位的競(jìng)爭(zhēng)力也隨之變大。互聯(lián)網(wǎng)科技日新月異，從web 到app ，AR, AI 以及更多的新鮮事物出現(xiàn)。這也對(duì)UI設(shè)計(jì)人員的技能和專(zhuān)業(yè)素質(zhì)要求提高，從簡(jiǎn)單的制作靜態(tài)UI 到動(dòng)效，以及效果酷炫的3D效果以及具備制作原型等能力。
 

　　中國(guó)UI行業(yè)如今發(fā)展的如火如荼，而且給了設(shè)計(jì)師一個(gè)展露頭腳的機(jī)會(huì)。同時(shí)也涌現(xiàn)一批優(yōu)秀的互聯(lián)網(wǎng)設(shè)計(jì)師。國(guó)外UI對(duì)中國(guó)的影響很大，就如iPhone出現(xiàn) iOS7發(fā)布，扁平化出現(xiàn)，行業(yè)大部分UI的風(fēng)格趨向扁平化，國(guó)外的各種設(shè)計(jì)手法，流行趨勢(shì)也影響著國(guó)內(nèi)的很多設(shè)計(jì)師。
 

　　Mac早期操作界面
 

　　俄羅斯方塊是在1985年6月由俄羅斯人阿列克思·帕基特諾發(fā)明的。
 

　　移動(dòng)端UI的出現(xiàn)
 

　　手機(jī)UI的出現(xiàn)時(shí)間較早，但是真正被大家關(guān)注的是iPhone的出現(xiàn)，把硬件和軟件完美的結(jié)合，加上優(yōu)秀的用戶體驗(yàn)。一個(gè)新時(shí)代的開(kāi)始，從此開(kāi)辟了蘋(píng)果的時(shí)代。同時(shí)，UI行業(yè)在國(guó)內(nèi)興起，越來(lái)越多的設(shè)計(jì)師踏入這個(gè)行業(yè)。
 

　　UI的興起
 

　　手機(jī)，平板電腦是主流的UI形式 如今效果與技術(shù)越來(lái)越成熟。Web UI用戶體驗(yàn)也越來(lái)越專(zhuān)業(yè)，對(duì)用戶體驗(yàn)也重視。其他UI形式也開(kāi)始興起，這是一個(gè)美好的時(shí)代對(duì)于UI設(shè)計(jì)師而言。
 

　　UI發(fā)展的多元化
 

　　近段時(shí)間感觸還是蠻深的，很多朋友問(wèn)起我UI是不是沒(méi)有什么市場(chǎng)了， 感覺(jué)不像前一兩年那么火熱了，其實(shí)這個(gè)是個(gè)正常的狀態(tài)，任何熱門(mén)的崗位都是經(jīng)過(guò)火熱-平穩(wěn)-慢慢消退這樣的環(huán)節(jié)的，都是有一個(gè)曲線的，不會(huì)一直都屬于一個(gè)充血的狀態(tài)，鞭策著每一個(gè)設(shè)計(jì)師都去學(xué)習(xí)新技術(shù)，讓自己的技術(shù)更加的全面。
 

　　UI發(fā)展現(xiàn)狀
 

　　UI設(shè)計(jì)師每個(gè)階段都會(huì)有必須經(jīng)歷的過(guò)程 ：菜鳥(niǎo)-初級(jí)設(shè)計(jì)師-中級(jí)設(shè)計(jì)師-高級(jí)設(shè)計(jì)師-資深設(shè)計(jì)師-總監(jiān) -專(zhuān)家-大神。根據(jù)公司的特殊性，設(shè)計(jì)師的工作內(nèi)容也會(huì)有所差異。不同階段的設(shè)計(jì)師他們要做的工作內(nèi)容也不同，大致可以分為：執(zhí)行層-咨詢層-管理層。我認(rèn)為這是一件很公平的工作，因?yàn)槲覀兠總€(gè)人都需要理解或經(jīng)歷工作的積累，技術(shù)的鍛煉，和經(jīng)驗(yàn)的分享。我也很清晰付出與回報(bào)成正比，總監(jiān)總是有種想歸隱田園的憂郁氣質(zhì)。UI設(shè)計(jì)師通常被大家認(rèn)為等同于視覺(jué)設(shè)計(jì)師。然而除了視覺(jué) 觸覺(jué) 聽(tīng)覺(jué)還有情感化設(shè)計(jì)等，未來(lái)的發(fā)展趨勢(shì)會(huì)越來(lái)越廣，因?yàn)檩d體不同，所要提高的設(shè)計(jì)規(guī)范，和應(yīng)用效果都不一樣。
 

　　按鈕是普通又常見(jiàn)的交互設(shè)計(jì)元素。雖然它看起來(lái)很簡(jiǎn)單，但過(guò)去幾十年間，它的設(shè)計(jì)風(fēng)格也發(fā)生了天翻地覆的變化。不變的是，按鈕設(shè)計(jì)一直圍繞著可識(shí)別度和清晰度。Windows 95的對(duì)話框使用強(qiáng)烈的投影和高亮來(lái)創(chuàng)造3d效果。這種效果幫助用戶理解視覺(jué)上的主次關(guān)系，也展示了哪些是可交互的元素。
 

　　擬物化按鈕電子設(shè)計(jì)中的擬物風(fēng)格，是指將 UI 元素做得和實(shí)物非常相似。無(wú)論是模仿現(xiàn)實(shí)中的材質(zhì)，還是讓按鈕看起來(lái)像實(shí)際存在的按鈕。擬物化的設(shè)計(jì)旨在讓用戶轉(zhuǎn)移對(duì)實(shí)物的經(jīng)驗(yàn)，到虛擬的用戶界面中。下面計(jì)算器的例子，就是讓用戶將關(guān)于實(shí)體計(jì)算器的知識(shí)轉(zhuǎn)移到電子環(huán)境中。扁平化按鈕近期UI設(shè)計(jì)風(fēng)格上的一大轉(zhuǎn)變，就是從擬物化風(fēng)格像扁平的方向發(fā)展，去除3D效果。不像擬物化設(shè)計(jì)，扁平化設(shè)計(jì)不再靠重構(gòu)現(xiàn)實(shí)的外觀來(lái)探索電子世界。因此，它減去了大量用于顯示可點(diǎn)擊性的視覺(jué)暗示。 幽靈按鈕指那些只有基本按鈕形狀，如矩形或是方形，但卻是透明的或中空的按鈕。幽靈按鈕一般被極細(xì)的線包圍著，里面只有簡(jiǎn)單的文字。簡(jiǎn)單樸素的矩形加上框架中整齊的字體，在扁平化界面中看起來(lái)很完美。
 

　　尺寸和內(nèi)邊距按鈕的尺寸也是幫助用戶識(shí)別它們的一個(gè)關(guān)鍵要素。在考慮按鈕尺寸的同時(shí)也要考慮可點(diǎn)擊元素之間的距離： 尺寸。當(dāng)輕按是你的app或網(wǎng)站上的主要輸入方式時(shí)，你可以借鑒 MIT Touch 實(shí)驗(yàn)室的一個(gè)研究來(lái)選擇合適的按鈕尺寸。MIT 研究發(fā)現(xiàn)指腹的平均尺寸是10-14mm，而指尖是8-10mm，這使得10mm x 10mm是一個(gè)合適的最小點(diǎn)擊尺寸。
 

　　當(dāng)鼠標(biāo)和鍵盤(pán)是主要輸入方式時(shí)，按鈕的尺寸可以稍微縮小一些，來(lái)適配緊湊的用戶界面。內(nèi)間距。按鈕的內(nèi)間距將它們分隔開(kāi)來(lái)，同時(shí)也讓界面擁有足夠的呼吸的空間。 要謹(jǐn)慎地給按鈕填寫(xiě)標(biāo)注。這個(gè)選擇要基于最小意外原則。顏色當(dāng)選擇色板時(shí)，一定要考慮顏色在幫助用戶定位和理解界面時(shí)的作用：使用色彩和對(duì)比，來(lái)幫助用戶觀察和了解你app的內(nèi)容，和正確的交互方式。下面的例子中，為按鈕使用了紅色來(lái)指示可能具有破壞性的行為。 結(jié)論按鈕是用來(lái)引導(dǎo)用戶采取你想讓他們采取的行動(dòng)的。將網(wǎng)頁(yè)或 app 看作是由一位匆忙的用戶開(kāi)啟的對(duì)話，按鈕在這對(duì)話中起到至關(guān)重要的作用——流暢的交互使對(duì)話流暢地進(jìn)行，而小差錯(cuò)(比如不能找到正確的按鈕)則會(huì)制造阻礙，更糟糕的可能是使對(duì)話終止。
 

　　在人機(jī)交互界面設(shè)計(jì)里，我們經(jīng)常會(huì)聽(tīng)到一個(gè)詞，就是“所見(jiàn)即所得”的可視化交互體驗(yàn)，它最早被運(yùn)用在Alto計(jì)算機(jī)的設(shè)計(jì)理念之中，第一個(gè)擁有GUI操作系統(tǒng)的計(jì)算機(jī)Xerox Alto及繼承者Xerox Star，首次使用了窗口設(shè)計(jì)
 

　　桌面應(yīng)用UI設(shè)計(jì)的基本要素
 

　　應(yīng)用程序?yàn)槭褂脭?shù)據(jù)而在圖形用戶界面中設(shè)置的基本單元。應(yīng)用程序和數(shù)據(jù)在窗口內(nèi)實(shí)現(xiàn)一體化。在窗口中，用戶可以在窗口中操作應(yīng)用程序，進(jìn)行數(shù)據(jù)的管理、生成和編輯。窗口是桌面應(yīng)用的上層，也是桌面應(yīng)用UI的核心元素。窗口可以被移動(dòng)、放大、縮小的，用于放置內(nèi)容和功能的容器。

　　從GUI的發(fā)展歷程可以看出，底層系統(tǒng)和桌面應(yīng)用一直在以窗口這個(gè)對(duì)象和數(shù)據(jù)的載體，向用戶傳達(dá)信息。菜單通常由可供選擇的一組文字和符號(hào)組成，是一系列命令的列表。用戶用鼠標(biāo)單擊其中一個(gè)選項(xiàng)后，就指定計(jì)算機(jī)執(zhí)行一個(gè)特定動(dòng)作或功能。菜單一般用來(lái)提供指向各種操作和功能的快

捷途徑，比如打開(kāi)和儲(chǔ)存文檔、退出程序、操作數(shù)據(jù)等。應(yīng)用可以將它當(dāng)作是一系列常用命令的快捷鍵，而不需要用戶詳細(xì)了解這些命令的使用語(yǔ)法。
 

　　工具欄也是一種有關(guān)聯(lián)動(dòng)作的集合，用戶可以通過(guò)工具欄提供的功能，對(duì)于數(shù)據(jù)、文檔進(jìn)行功能性操作。工具欄更多從屬于應(yīng)用軟件，用戶可以通過(guò)菜單調(diào)出或取消它們。工具欄如果處于活動(dòng)狀態(tài)，就會(huì)以一組可視圖標(biāo)的形式呈現(xiàn)，可視圖標(biāo)通常還會(huì)配以小的文本標(biāo)簽。
 

　　桌面應(yīng)用的工具欄發(fā)展到今天，位置通常出現(xiàn)在應(yīng)用主窗口的頂部。很多應(yīng)用允許用戶根據(jù)個(gè)人需要自定義工具欄，對(duì)工具欄中的按鈕等對(duì)象進(jìn)行添加、刪除、調(diào)整位置。在桌面中，圖標(biāo)常常用于表示計(jì)算機(jī)系統(tǒng)中的程序、功能、數(shù)據(jù)或數(shù)據(jù)集。應(yīng)用程序的啟動(dòng)圖標(biāo)依靠別具一格和顯著的風(fēng)格，一直被作為產(chǎn)品品牌的一個(gè)重要部分。
 

　　圖形化的界面可能是目前最友好最成熟的人機(jī)交互信息的載體，因?yàn)槲覀兡芸吹降奈?，其?shí)都是由二位空間的形，和三維空間的體所構(gòu)成的。我們之所以認(rèn)識(shí)文字，那是因?yàn)槲覀冊(cè)谧R(shí)字時(shí)是先記住了形，再將形與意匹配、記憶。因此，圖形化用戶界面是符合人類(lèi)本能的存在。
 

　　從用戶心智模型的角度來(lái)看，圖形化用戶界面處于用戶心智的平穩(wěn)期，已經(jīng)長(zhǎng)時(shí)間被我們接受，我們已經(jīng)習(xí)以為常，想要被打破。
 

　　UI行業(yè)走向
 

　　UI設(shè)計(jì)行業(yè)緊跟著科技公司的需求隨之變化，如今國(guó)內(nèi)的UI設(shè)計(jì)從業(yè)人員已經(jīng)比之前增加很多，并且屬于逐年大量入坑狀態(tài)。市場(chǎng)也發(fā)生變化，如今不僅僅是做個(gè)手機(jī)app 做個(gè)網(wǎng)頁(yè)那么單一。當(dāng)公司越成熟，對(duì)公司的員工的職業(yè)素養(yǎng)會(huì)發(fā)生變化，我們要做的就是不斷的讓自己具備更全面更高效的工作能力。
 

　　懂需求的UI
 

　　工作中我們會(huì)發(fā)現(xiàn)誰(shuí)懂的多，誰(shuí)就會(huì)顯得有話語(yǔ)權(quán)，當(dāng)需求給到UI設(shè)計(jì)人員，設(shè)計(jì)師懂產(chǎn)品，懂UE，懂用戶體驗(yàn)，能看懂?dāng)?shù)據(jù)，還能在還原度上要求開(kāi)放緊追著開(kāi)發(fā)?；ヂ?lián)網(wǎng)創(chuàng)業(yè)的熱度雖然平穩(wěn)下來(lái)，但在這個(gè)互聯(lián)網(wǎng)的時(shí)代。但是依舊在前赴后繼的放眼全球，知乎上有一篇文章來(lái)自谷歌的設(shè)計(jì)師，爆出了個(gè)很驚人的結(jié)論，在美國(guó)硅谷單純的UI設(shè)計(jì)師幾乎已經(jīng)不存在了。如果一個(gè)視覺(jué)設(shè)計(jì)師不懂產(chǎn)品，不懂交互設(shè)計(jì)，不懂用戶體驗(yàn)設(shè)計(jì)，基本上就沒(méi)有出路了。這從側(cè)面也印證了一點(diǎn)，UE+UI可能才是UI的真正發(fā)展方向和最終形態(tài)。
 

　　懂運(yùn)營(yíng)的UI
 

　　各種廠商各種節(jié)日設(shè)計(jì)推廣，各種情感話訴求，必然會(huì)需要大量的運(yùn)營(yíng)類(lèi)型UI設(shè)計(jì)師一展拳腳。擺脫了規(guī)范的限制，擺脫了扁平化的需求，平面設(shè)計(jì)能力，手繪造型能力以及創(chuàng)意表達(dá)能力的素養(yǎng)真正的就拉出來(lái)比拼了。這可不是幾個(gè)月可以復(fù)制出來(lái)的，一定是未來(lái)?yè)屖值膷徫恢?。這些都離不開(kāi)一個(gè)懂運(yùn)營(yíng)的UI設(shè)計(jì)師。
 

　　會(huì)代碼的UI
 

　　懂動(dòng)效，懂代碼，能建站，能獨(dú)立完成H5類(lèi)推廣頁(yè)面，從穩(wěn)定的公司規(guī)模來(lái)看，一般小公司1-2個(gè)設(shè)計(jì)，6-10個(gè)開(kāi)發(fā)，就能算出來(lái)，未來(lái)一定是開(kāi)發(fā)者的美好未來(lái)。但是其實(shí)開(kāi)發(fā)領(lǐng)域也在被細(xì)分。二三線市場(chǎng)的拓寬，各種淘寶建站，公司的宣傳類(lèi)型網(wǎng)站，微信內(nèi)的H5頁(yè)面，加上簡(jiǎn)單的演示用demo。你的想法不再一定是一張張YY出來(lái)只能看的圖，你還能把它給真的做出來(lái)，親手實(shí)現(xiàn)你的idea。
 

　　會(huì)特效的UI
 

　　做動(dòng)效，建模，加動(dòng)畫(huà)劇情這樣的設(shè)計(jì)誰(shuí)不喜歡，Dribbble 作為UI設(shè)計(jì)師最重要的網(wǎng)站，毫不夸張的說(shuō)，他決定著很多設(shè)計(jì)師的命運(yùn)。從09年UI起步至今，在 Dribbble 上有3次重要的的風(fēng)格轉(zhuǎn)變。每一次轉(zhuǎn)變，都引領(lǐng)著一種設(shè)計(jì)潮流。
 

　　寫(xiě)實(shí)風(fēng)盛行，豐富的光影關(guān)系與細(xì)致的明暗漸變，達(dá)到了極致，漸變、陰影、深度、紋理……隨著UI設(shè)計(jì)的更新迭代，社會(huì)和企業(yè)需要的UI設(shè)計(jì)人才是全方位發(fā)展的，各方面對(duì)UI設(shè)計(jì)的要求越來(lái)越高，只有高素質(zhì)的UI設(shè)計(jì)師才能受到企業(yè)的青睞。