如何提高UI設(shè)計的速度?在這里分享一些我觀察到的常見問題和改善方式。當(dāng)然,需要注意的地方何其多,本文先著重聊一下觀念和溝通的部分。
了解工程實(shí)作的基本原理
業(yè)界 NG 率:接近 100%
許多人認(rèn)為創(chuàng)造力和邏輯是左右半腦分開管轄的、設(shè)計師和工程師使用的是不同部分的能力,所以大家各安其份做好自己的工作就好——我負(fù)責(zé)光鮮亮麗地畫圖,工程師就負(fù)責(zé)用超大聲的同刻鍵盤在黑色的屏幕上編寫外星文。
但事實(shí)上這種刻板印象除了阻礙你進(jìn)步以外可說是一點(diǎn)用都沒有(而且不見得是正確的)。
巴別塔的故事大家?guī)缀醵悸犨^,會造成溝通問題的原因很簡單,就是講的「語言」不同,而非思考方式不一樣——無論是什么領(lǐng)域,要成為佼佼者,都必須具備高度的創(chuàng)造和想象能力,而設(shè)計更是非常講求邏輯的行為。
所以設(shè)計師懂工程實(shí)作原理要做什么?該懂哪些部分?很簡單,你不需要學(xué)會怎么寫 code,但你至少需要懂得:
1. 正確稱呼 UI 組件
以 iOS 為例子,在 Apple 的接口設(shè)計規(guī)范文件里,每個畫面構(gòu)成的組件都有正式的名稱,我們看看:
這個玩意兒叫做「Segmented Controls」,而不是「那個長得像膠囊的選單」,如果能夠使用正確的術(shù)語來溝通,將能夠省下非??捎^的解釋時間。如果你想了解得更多、更精確,將前述的規(guī)范文件讀熟以后,建議你再繼續(xù)研究 UIKit Catalog。
2. 有些效果就是做不出來、很難做、不該做
最普遍的例子:自從 iOS 7 引入帶有模糊效果的設(shè)計語言后,大家似乎都染上了高斯模糊的癮。但這樣的效果非常耗費(fèi)系統(tǒng)資源(原理及時間復(fù)雜度),就連 iOS 也到了來年的 iOS 8 才心不甘情不愿地開放使用 UIBlurEffect API,免得第三方 App 一堆模糊效果拖累系統(tǒng)效能;而在 Android 上官方更沒有提供像 iOS 如此方便的 API 可用(有錯請不吝指正)。
聽起來像外星語?白話來說,許多設(shè)計師毫無意識到某些視覺效果在工程實(shí)做面的可行性、也沒有考慮到各種裝置的運(yùn)算負(fù)荷能力,而設(shè)計了大量會讓開發(fā)者面有難色的稿子,好不容易做出來了,發(fā)現(xiàn)算圖卡頓得要命,又要回頭改稿,得不償失。
我看過太多設(shè)計師為了設(shè)計感而給 Status Bar 著上前景色(Foreground),讓它變灰甚至變成彩色,又指責(zé)開發(fā)者這么單純的事都辦不到,其實(shí) Apple 在文件里寫得很清楚,這個東西你就只有黑或白色可選,像這種就是你不該做的效果。
建議:如果你是就讀設(shè)計科系的大學(xué)生或研究生,我會建議你選修計算器概論、基礎(chǔ)數(shù)據(jù)結(jié)構(gòu),這些都會對 UI 設(shè)計非常有幫助。
嚴(yán)謹(jǐn)執(zhí)行設(shè)計流程
業(yè)界 NG 率:90%
之前和一些公司合作的過程、以及和朋友聊天的時候,我發(fā)現(xiàn)一個團(tuán)隊(duì)在設(shè)計流程上草率帶過的情形比想象中還多。一般來說我會建議中小型項(xiàng)目采取以下流程來執(zhí)行設(shè)計:
這個流程是容許微調(diào)的,我在 Yahoo 實(shí)習(xí)時??吹椒浅4笮偷脑O(shè)計流程,而在其他小型團(tuán)隊(duì)工作時則多會采取上述較簡易的版本。
要如何微調(diào)呢?基本上不建議省略其中的步驟,但在上面綠色箭頭處可以減少迭代(Iterate)的次數(shù)來達(dá)到省時的目的,而這部分就會稍微考驗(yàn)到產(chǎn)品設(shè)計師、PM 的經(jīng)驗(yàn)和 gut feeling 了。
有些講得一口好設(shè)計的人會不食人間煙火、一味地倡導(dǎo)要從使用者調(diào)查研究(User Research)、Persona 開始做起,然后實(shí)作 n 多個原型(Prototype)才開始讓開發(fā)者動手,后續(xù)再做數(shù)據(jù)分析??等工作,好像全世界只有自己知道這件事一樣。
但實(shí)務(wù)上,小型項(xiàng)目花太多心力去做這些事基本上是缺乏成本觀念的表現(xiàn),在使用者數(shù)量達(dá)到一定門坎前,數(shù)據(jù)分析的母體也是小得可憐,并無統(tǒng)計的參考價值。因此,小型項(xiàng)目其實(shí)可以將功能拆分 Release,先做出來再觀察使用情形并修正細(xì)節(jié)(雖然有一點(diǎn)危險,但比起讓項(xiàng)目永無結(jié)束之日,總是較適當(dāng)?shù)倪x擇)。
先以原生 UI 組件表意
業(yè)界 NG 率:80%
在設(shè)計的 wireframe 階段,主要目標(biāo)是讓大家對于畫面上「有哪些對象」取得共識,而不是這些對象「該長什么樣子」,那是 mockup 階段才要注重的,因此將 wireframe 畫得過于精美是一件非常奇怪的事情,例如這樣:
如果把 wireframe 畫得如此精美,你將立即面臨三個負(fù)面后果:
浪費(fèi)時間,徹底的浪費(fèi)時間。
有彩色稿的外型構(gòu)造,卻沒彩色稿的色彩系統(tǒng)輔佐,導(dǎo)致大家無法完整理解你「精心設(shè)計」的 UI 對象。
對設(shè)計沒概念的客戶、PM 或老板會忘記我們是在 review 畫面上有哪些對象,反而在這時就開始跟你檢討設(shè)計細(xì)節(jié),等你接著做彩色稿時,才突然講說之前有哪個功能忘記擺放上去。
其中第二點(diǎn)是本節(jié)的重點(diǎn),在你的 wireframe 里,應(yīng)該使用系統(tǒng)原生的對象來構(gòu)成畫面,例如這些東西:
請避免在非必要的狀況下急著在 wireframe 里畫一些從來沒有人看過的「創(chuàng)新 UI」。一個好理解、直覺的設(shè)計是所有細(xì)節(jié)相輔相成的,在 wireframe 的階段缺少了顏色和動態(tài)效果的輔助,更不該冒險呈現(xiàn)特殊的對象外型,也就是說,你的 wireframe 頂多做到這樣就該收手:
這樣一來,畫面上都是大家平常使用 App 時有看過的形式,看得懂畫面的時候,就能夠?qū)P奶接戇@些功能是不是產(chǎn)品所需要具備的。
少用代名詞
業(yè)界 NG 率:60%
這個溝通技巧不難做到,但如果沒有人指出,是很難自己發(fā)現(xiàn)的。
我們表達(dá)一件事情若要表達(dá)得精確,就應(yīng)該試著減少話中的「詮釋空間」,而代名詞的使用非常容易造成設(shè)計討論上的時間浪費(fèi),例如「這個」、「那個」之類的詞匯,在專業(yè)討論上應(yīng)該減少使用;取而代之,你應(yīng)該使用本篇文章第一節(jié)所提到的精確名詞來表達(dá),或是詳細(xì)描述你所指的外型。
本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計公司,成都網(wǎng)站設(shè)計公司,高端網(wǎng)站建設(shè)
網(wǎng)站名稱:四個幫你提高UI設(shè)計效率的工作技巧
文章出自:http://m.rwnh.cn/news20/171620.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、全網(wǎng)營銷推廣、網(wǎng)站策劃、靜態(tài)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)