一個(gè)合格的UI設(shè)計(jì)師需要必備哪些知識(shí)

一個(gè)合格的UI設(shè)計(jì)師需要必備哪些知識(shí)

      一個(gè)合格的UI設(shè)計(jì)師需要必備哪些知識(shí)？ui設(shè)計(jì)要學(xué)的東西很多，軟件是基礎(chǔ)的東西，要想做好出好的ui設(shè)計(jì)就得先熟練掌握ui設(shè)計(jì)的基礎(chǔ)軟件，軟件方面有：PS、AI、ID、Firework、Dreamweaver、HTML5、div+css等等

      一個(gè)網(wǎng)站不僅僅是一組鏈接過的頁面，而是一種體現(xiàn)，一個(gè)空間。在這個(gè)空間里，不同的人、組織會(huì)遇見、溝通、交互。這些互動(dòng)能為訪問者提供體驗(yàn)。作為一名網(wǎng)頁設(shè)計(jì)師，我們的工作就是盡可能地使體驗(yàn)感受更好。

      其中的關(guān)鍵就在于優(yōu)先并且始終考慮你的客戶。界面設(shè)計(jì)側(cè)重于界面功能的布局，用戶體驗(yàn)設(shè)計(jì)則側(cè)重于更大的局面，也就是整個(gè)體驗(yàn)，界面設(shè)計(jì)只是其中的一個(gè)子集。

      一個(gè)合格的UI設(shè)計(jì)師需要必備哪些知識(shí)？UI設(shè)計(jì)師需要先了解客戶的需求

      最重要的是，我們需要定位用戶——內(nèi)外都需要。這就意味著我們的應(yīng)用能吸引多少流量，更重要的是，了解其中客戶地需求，以及他們?cè)跐M足需求的道路上所遇到的障礙。

      而要做到這種程度的分析，我們需要更細(xì)致的統(tǒng)計(jì)數(shù)據(jù)，這就需要深入了解網(wǎng)站的用戶了。與用戶面對(duì)面交談，觀看他們的使用流程，詢問相關(guān)的問題，比如“你對(duì)這種設(shè)計(jì)有什么看法?”，或是其他更深的問題。

      用戶的需求是什么?是什么在阻礙他們滿足自己的需求?而我們的網(wǎng)站將會(huì)如何幫助他們解決或是克服這些阻礙?

      千萬別空想你的用戶想要什么，你需要實(shí)地深入挖掘。畢竟，欲望只是需求的產(chǎn)物，如果我們能夠滿足用戶深層次的需求。就能滿足他們的一些愿望，以及更多的基本要求。

      通過數(shù)據(jù)分析以及與用戶的溝通，我們能夠得到許多問題的答案，這些問題可能是從如何使用界面，或是界面的重點(diǎn)應(yīng)該放在哪里。

      UI設(shè)計(jì)中定義界面的使用方法

      在設(shè)計(jì)界面之前，我們需要想清楚它的使用方法。隨著觸屏的普及，觀察比想象更能發(fā)揮作用。

      亮點(diǎn)：應(yīng)用程序的用戶體驗(yàn)大多來自輕松和流暢的橫向觸摸。

      人們有這么兩種方法來使用網(wǎng)站和應(yīng)用程序：通過與產(chǎn)品進(jìn)行交互的直接方法，與通過與產(chǎn)品外圍進(jìn)行交互的間接方法。

直接交互的例子:

點(diǎn)擊按鈕

刷卡

使用指尖進(jìn)行拖拽

簡(jiǎn)介交互的例子:

使用鼠標(biāo)點(diǎn)擊

使用鍵盤命令/快捷鍵

鍵入表單輸入域

在Wacom上繪圖

有時(shí)交互很簡(jiǎn)單。

      用戶定位以及用戶所使用的設(shè)備會(huì)在很大程度上影響我們的決定。如果是為老年人或是手部受限的人群進(jìn)行設(shè)計(jì)，我們就不需要太多的橫向滑動(dòng)。如果是在為通過鍵盤來與應(yīng)用程序進(jìn)行溝通的編程人員或是作家進(jìn)行設(shè)計(jì)，那么我們需要支持所有常見的快捷鍵方式，以最大限度地減少鼠標(biāo)使用時(shí)間。

      在UI設(shè)計(jì)中怎樣設(shè)定預(yù)期

      許多網(wǎng)站或是應(yīng)用都會(huì)出現(xiàn)這樣的情況：?jiǎn)螕舭粹o就進(jìn)入付款界面、刪除網(wǎng)站或是一些不是很好的界面。每一次點(diǎn)擊都有結(jié)果，有時(shí)還會(huì)帶來焦慮。

      因此，一定要讓用戶知道如果點(diǎn)擊了這個(gè)按鈕會(huì)發(fā)生什么。我們可以通過設(shè)計(jì)或是復(fù)制來做到這一點(diǎn)。

通過設(shè)計(jì)設(shè)定預(yù)期:

突出顯示所需的按鈕

使用約定俗成的符號(hào)，如用垃圾桶代表刪除、加號(hào)代表添加內(nèi)容，放大鏡用來表示搜索

選擇具有相關(guān)含義的顏色，如綠色代表“前進(jìn)”，紅色代表“停止”

通過復(fù)制設(shè)定預(yù)期:

解釋清楚按鈕的作用

在空白處提供具有導(dǎo)向性和鼓勵(lì)性質(zhì)的文字說明

適時(shí)發(fā)出警告并要求確認(rèn)

對(duì)于不可逆的行為，如永久刪除某些內(nèi)容，則需要詢問用戶是否確定。

在InVision中，單擊垃圾桶圖標(biāo)并不會(huì)立即刪除，網(wǎng)站會(huì)詢問你是否確定，并告知操作不能撤銷。

UI設(shè)計(jì)師怎樣預(yù)測(cè)可能出現(xiàn)的錯(cuò)誤

人都會(huì)犯錯(cuò)，而神明會(huì)原諒犯錯(cuò)�！�—Alexander Pope《論批評(píng)》

人總是會(huì)犯錯(cuò)，也總是不得不承擔(dān)后果。這里有兩種方法可以減少錯(cuò)誤的影響：

1.防止錯(cuò)誤發(fā)生

2.亡羊補(bǔ)牢，為時(shí)不晚

      我們能在很多電子商務(wù)網(wǎng)站以及表單設(shè)計(jì)中看到很多規(guī)避錯(cuò)誤的方法：在填寫完所有空格錢，按鈕并不被激活;表單常常會(huì)檢測(cè)到電子郵件地址錯(cuò)誤;以及彈出詢問窗口詢問你是否真的想清空購(gòu)物車。

      與亡羊補(bǔ)牢相比，預(yù)測(cè)錯(cuò)誤從而規(guī)避往往沒那么沮喪，畢竟點(diǎn)擊“下一頁”或是“提交”時(shí)在發(fā)現(xiàn)錯(cuò)誤簡(jiǎn)直太難過了。

      在寫防錯(cuò)說明時(shí)，我們需要確定說明說清楚了兩件事：

      1.把問題解釋清楚了，例如，“你說你出生在火星，但人類并沒有在火星上殖民，所以出錯(cuò)了”。

      2.將問題的解決方法解釋清楚。例如，“請(qǐng)選擇地球上的一個(gè)出生地”。

      另外，請(qǐng)注意我們還需要一個(gè)保留之前的某些狀態(tài)，好查看之前并沒有出現(xiàn)錯(cuò)誤的情況。例如，如果我不小心刪除了某些重要文件，但實(shí)際上可以回復(fù)文件，請(qǐng)使用一行文字讓我知道有這個(gè)功能，就像“您可以轉(zhuǎn)到垃圾桶還原已刪除的項(xiàng)目”一樣。

      預(yù)測(cè)用戶錯(cuò)誤的原理稱為poka-yoke原理，這是一個(gè)日本術(shù)語，意為“防錯(cuò)”。

      UI設(shè)計(jì)中怎樣實(shí)現(xiàn)反饋迅速

      在現(xiàn)實(shí)世界中，環(huán)境總是給予我們反饋，我們說話，別人回應(yīng);我們擼貓，貓則會(huì)發(fā)出咕嚕聲或是嘶嘶聲，當(dāng)然這取決于它的心情。

      數(shù)字界面往往不會(huì)給予我們反饋，我們總是不知道是否該重新加載頁面、重新啟動(dòng)筆記本電腦，還是將它關(guān)閉，從最近可用窗口中刪除。

      所以我們可以設(shè)計(jì)一個(gè)加載動(dòng)畫。當(dāng)我們點(diǎn)擊它時(shí)，讓那個(gè)按鈕彈出并反彈，當(dāng)然幅度不要太大。如果我完成了一些事的時(shí)候，也可以設(shè)計(jì)一個(gè)虛擬的“擊掌”，讓我知道我的完成情況。

      MailChimp在用戶安排或者發(fā)送電子郵件是提供反饋和建議

      但要確保反饋?zhàn)顗蜓杆�。Usability.gov將任何沖過1秒鐘的延遲定義為中斷，超過10秒基本可以說是受損了。但實(shí)際上，只需要三秒鐘，就能讓美國(guó)一般的人口受到影響。

      如果頁面只能在5秒左右加載好，就不需要顯示進(jìn)度條了，因?yàn)檫@會(huì)使得加載時(shí)間看起來更長(zhǎng)了。單可以使用并不明示前進(jìn)的可視化，例如Mac的“死亡風(fēng)車”。如果我們需要在網(wǎng)站上使用進(jìn)度條，請(qǐng)考慮嘗試使用一些視覺技巧，這樣能讓加載看起來更快一些。

      事實(shí)證明，想要設(shè)計(jì)出更優(yōu)秀的效果，合理地運(yùn)用技巧其實(shí)更重要，而且是可以出效果的�！澳懿荒茏龅脑俑呒�(jí)一點(diǎn)兒?!”對(duì)于每個(gè)UI設(shè)計(jì)師而言，總會(huì)聽到客戶和老板提出這樣的要求。這時(shí)候，很多人會(huì)在心里默默的翻上一個(gè)白眼：“我又是藝術(shù)家，我沒法作出更好的效果!”又或者你正在制作一個(gè)你自己的個(gè)人項(xiàng)目，而你希望它比 Bootstrap 的默認(rèn)效果要強(qiáng)一些。這時(shí)候，你可能又會(huì)在心里打退堂鼓：“怎么能作出更好的效果?”

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://elsolbar.com/news-id-44867.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050