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

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

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

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

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

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

　　Mac早期操作界面
 

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

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

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

　　UI的興起
 

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

　　UI發(fā)展的多元化
 

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

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

　　UI設(shè)計(jì)師每個(gè)階段都會有必須經(jīng)歷的過程 ：菜鳥-初級設(shè)計(jì)師-中級設(shè)計(jì)師-高級設(shè)計(jì)師-資深設(shè)計(jì)師-總監(jiān) -專家-大神。根據(jù)公司的特殊性，設(shè)計(jì)師的工作內(nèi)容也會有所差異。不同階段的設(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)為等同于視覺設(shè)計(jì)師。然而除了視覺 觸覺 聽覺還有情感化設(shè)計(jì)等，未來的發(fā)展趨勢會越來越廣，因?yàn)檩d體不同，所要提高的設(shè)計(jì)規(guī)范，和應(yīng)用效果都不一樣。
 

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

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

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

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

　　在人機(jī)交互界面設(shè)計(jì)里，我們經(jīng)常會聽到一個(gè)詞，就是“所見即所得”的可視化交互體驗(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的核心元素。窗口可以被移動、放大、縮小的，用于放置內(nèi)容和功能的容器。

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

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

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

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

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

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

　　UI行業(yè)走向
 

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

　　懂需求的UI
 

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

　　懂運(yùn)營的UI
 

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

　　會代碼的UI
 

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

　　會特效的UI
 

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

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