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

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

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

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

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

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

　　Mac早期操作界面
 

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

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

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

　　UI的興起
 

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

　　UI發(fā)展的多元化
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　圖形化的界面可能是目前最友好最成熟的人機交互信息的載體，因為我們能看到的物，其實都是由二位空間的形，和三維空間的體所構(gòu)成的。我們之所以認(rèn)識文字，那是因為我們在識字時是先記住了形，再將形與意匹配、記憶。因此，圖形化用戶界面是符合人類本能的存在。
 

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

　　UI行業(yè)走向
 

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

　　懂需求的UI
 

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

　　懂運營的UI
 

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

　　會代碼的UI
 

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

　　會特效的UI
 

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

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