我遇到非常多這樣子的設(shè)計(jì)師，他們從不考慮「這樣設(shè)計(jì)稿交出去，工程師做不做得出來(lái)」的問(wèn)題，也不愿意去了解什么叫「限制」和「規(guī)則」。如果你也想從畫(huà)圖標(biāo)的變成UI設(shè)計(jì)師，這篇干貨千萬(wàn)要收藏。成都網(wǎng)站設(shè)計(jì)小編為您解析，UI設(shè)計(jì)師容易忽略的四大問(wèn)題：  

  可行性   

  想了解UI/UX，就一定要了解這張圖，這是JesseJamesGarrett在2000年發(fā)表的用戶經(jīng)驗(yàn)元素一書(shū)中所提出：使用者的經(jīng)驗(yàn)可分成抽象到具體，也就是由策略、范圍、結(jié)構(gòu)、骨架、表層所構(gòu)成。圖片上有原作者的說(shuō)明大家自己看吧。

  

 這張圖是同一位作者提出的概念，同樣他也寫(xiě)了很多說(shuō)明，大家還是自己看吧。

這篇文的重點(diǎn)從這里開(kāi)始，我擅自把兩張圖合在一起比對(duì)，原始圖檔是分開(kāi)的。合并后可以清楚看到每個(gè)階段包含的面向。以下是我自己的分析和筆記心得。

  策略

  使用者需求和開(kāi)發(fā)的目的

  用戶需要什么、建立這個(gè)App/Web的目標(biāo)是什么，這些都是整個(gè)項(xiàng)目最底層的根基，也是一切發(fā)源的基礎(chǔ)?；A(chǔ)不穩(wěn)越往上發(fā)展問(wèn)題就會(huì)越多越大，所有炫又酷的接口、多到爆炸的功能通通比不上這個(gè)階段的重要程度。搞不清楚這個(gè)項(xiàng)目的目標(biāo)是什么就貿(mào)然開(kāi)發(fā)…這個(gè)階段主要活躍的角色會(huì)是bD、pM、UI/UX。有時(shí)候pM和bD不那么清楚要怎么問(wèn)才能從「出張嘴」的金主口中挖出開(kāi)發(fā)所需要的情報(bào)，可以把這份工作交給UI/UX，在這個(gè)階段加入U(xiǎn)I/UX做訪談得到更多的信息，能減少未來(lái)開(kāi)發(fā)遇到問(wèn)題的機(jī)率。

  比如客戶說(shuō)「我要能查詢美食餐廳、要有會(huì)員系統(tǒng)、能有社交功能」。這聽(tīng)起來(lái)超龐大的對(duì)吧!但實(shí)際上客戶想要的搞不好就只是個(gè)列表、關(guān)鍵詞查詢熱門餐廳信息，賬號(hào)串接Fb后能對(duì)餐廳按贊或按干這樣而已，項(xiàng)目規(guī)模瞬間縮小很多。

  范圍

  找出需求與目的后以需求為基礎(chǔ)，整理出所有用戶可能會(huì)需要的信息及功能，以愉快且有效的運(yùn)用各種功能為出發(fā)點(diǎn)建構(gòu)合理的互動(dòng)模式與流程。

  這個(gè)階段就是把抽象需求內(nèi)容轉(zhuǎn)成可實(shí)行的功能，并訂定出Spec。把所有需要的信息、功能等全部列出，并歸納分類，以「策略」層決議的目標(biāo)和需求為出發(fā)點(diǎn)，考慮各種操作方式。(再?gòu)?qiáng)調(diào)一次，同樣都是音樂(lè)播放器，列表型的和很炫型的就算功能大同小異，操作方式和接口設(shè)計(jì)還是會(huì)差很多。)

  把所有可能會(huì)用上的功能、所有必需呈現(xiàn)的信息、圖片等等全部用樹(shù)形圖條列出來(lái)，方便UI/UX未來(lái)畫(huà)UIFlow、方便SA制定ApI，也方便RD計(jì)算人日、pM控管項(xiàng)目時(shí)程，好處多多。發(fā)現(xiàn)沒(méi)?這階段就是在做FunctionalMap啦!

  結(jié)構(gòu)

  把所有信息整合起來(lái)，依用戶能直覺(jué)理解的方式組織成完整的概念。

  既然「范圍」層在制作FunctionalMap，那「結(jié)構(gòu)」層就是在做UIFlow了，這個(gè)階段必需定義信息、功能等要用什么方式呈現(xiàn)。比如說(shuō)iphone上小張的美食照片只是預(yù)覽功能、需要「開(kāi)大圖」，那大圖要怎么個(gè)開(kāi)法?點(diǎn)擊放大?只放大單張圖嗎?需不需要pageControl?還是在該頁(yè)把手機(jī)橫拿就會(huì)自動(dòng)把圖片放大滿版?這階段訂定的Flow會(huì)左右界面的長(zhǎng)相。

  骨架

  結(jié)合接口設(shè)計(jì)、信息設(shè)計(jì)、導(dǎo)覽設(shè)計(jì)三者將信息做可視化的呈現(xiàn)，協(xié)助用戶理解信息。

  畫(huà)Wireframe的時(shí)候到了。之前已寫(xiě)過(guò)很多關(guān)于Wireframe的文章，就不多廢話。

  表層

  以視覺(jué)與感覺(jué)為基礎(chǔ)，設(shè)計(jì)接口元素如文字、頁(yè)面的視覺(jué)圖像、導(dǎo)覽組件等。

簡(jiǎn)單來(lái)說(shuō)就是「最終這個(gè)App/Web要帶給人什么感覺(jué)?」要注意的事項(xiàng)太多了，Guideline、UIStyle、Graphic…上Dribbble看看高手們的作品找靈感吧。在這階段牽涉的東西非常廣泛，不止是視覺(jué)，連聲音、震動(dòng)等等都可包含在內(nèi)。

當(dāng)你看到這行字，表示文章已大略看過(guò)，多少了解我想表達(dá)什么。請(qǐng)卷到最上層重看一遍JesseJamesGarrett提出的這2張圖。相信能夠更理解用戶經(jīng)驗(yàn)元素和實(shí)現(xiàn)方式。

  有沒(méi)有發(fā)現(xiàn)什么端倪了呢?當(dāng)手上的理論和資料一筆筆分開(kāi)來(lái)看都沒(méi)什么感覺(jué)，整理分析后再合在一起就很有種「天下武功出少林」的感覺(jué)。說(shuō)穿了天底下所有的事都有一定的軌跡可循，包含UI/UX。很多大師的理論資料看到后來(lái)都在講同一件事情，只是舉的例子、切入角度、實(shí)行的手法略有不同罷了。就跟無(wú)論什么項(xiàng)目、拆分到最后就只是「需求」和「功能」一樣。

  使用者經(jīng)驗(yàn)元素很明顯就說(shuō)了，視覺(jué)設(shè)計(jì)在最后一層。不過(guò)我遇到的設(shè)計(jì)師不少都喜歡從五樓開(kāi)始蓋，蓋完五樓再回頭打地基。他們覺(jué)得只有第五層的視覺(jué)才是設(shè)計(jì)師的工作，其他都與他無(wú)關(guān)。

  可行性?當(dāng)然不是設(shè)計(jì)師的工作啰，這不是工程師要處理的嗎?

  我遇到非常多這樣子的設(shè)計(jì)師，他們從不考慮「這樣設(shè)計(jì)稿交出去，工程師做不做得出來(lái)」的問(wèn)題，也不愿意去了解什么叫「限制」和「規(guī)則」。認(rèn)為自己設(shè)計(jì)出來(lái)的東西就是要100%完整呈現(xiàn)，辦不到就是工程師能力差，所以在RWD上驕傲自己有像素眼和F2E在刁1px的差距。

  很多設(shè)計(jì)師只想追最新版軟件，跟他說(shuō)HIG有最新版要不要多少瞄一下他會(huì)翻白眼給你看。常炫耀自己第一手掌握XX大師出新作品，高手給你小畫(huà)家都能畫(huà)出蒙娜莉薩，XX大師的作品也不是你的作品有什么好得意的?讓別人覺(jué)得自己品味非凡高格調(diào)?

  別理別人怎么樣了，管管自己做出來(lái)的圖稿會(huì)不會(huì)整死工程師先吧…很多時(shí)候不是美不美的問(wèn)題，是各種限制辦不到啊!

  視覺(jué)至上

  廣告會(huì)破壞美美的畫(huà)面，拿掉啊拿掉!但公司必須放廣告，這就要多思考了，要讓廣告也能夠被接受、看起來(lái)大氣美觀、沒(méi)有違和感。  

  無(wú)視數(shù)據(jù)源

  開(kāi)水龍頭就有水啦，管線?又不關(guān)我的事。

  這是我最痛恨的設(shè)計(jì)師行為之一，認(rèn)為數(shù)據(jù)源不關(guān)自己的事。以前參加過(guò)這樣的設(shè)計(jì)會(huì)議，一群設(shè)計(jì)師圍起來(lái)討論字體、顏色、圖片風(fēng)格…就是沒(méi)人討論數(shù)據(jù)怎么來(lái)。我覺(jué)得奇怪就問(wèn)了句，被當(dāng)來(lái)鬧場(chǎng)的，說(shuō)數(shù)據(jù)源是工程師的事。

  怎么不關(guān)UI設(shè)計(jì)的事，關(guān)系可大的咧!

  一張圖片是內(nèi)建、還是網(wǎng)絡(luò)更新下載?內(nèi)建在App里的話好辦事，需連網(wǎng)絡(luò)下載的圖片需不需要思考多種狀態(tài)?

  理想狀況(正常連網(wǎng)情況下顯示的圖。)

  下載中(圖片很大張的情況下要提醒用戶圖片下載中，不能空一塊在那。)

  默認(rèn)圖片(例：使用者未上傳頭像時(shí)，F(xiàn)b大頭照要放哪張圖?)

  發(fā)生錯(cuò)誤(圖片掛了讀不出來(lái)，常見(jiàn)于網(wǎng)頁(yè)。)

  這些在不在UI設(shè)計(jì)師的工作范圍?是啊，那數(shù)據(jù)源為什么設(shè)計(jì)師可以不用理解，推給工程師懂就好?不知道數(shù)據(jù)源要怎么設(shè)計(jì)UI?

  邏輯

  能用道理溝通的設(shè)計(jì)師是個(gè)寶。

  UI設(shè)計(jì)是非常吃邏輯思考的一門學(xué)問(wèn)，改了上百份學(xué)員作業(yè)后覺(jué)得，設(shè)計(jì)本科生在思考功能、Flow上的表現(xiàn)很差，反而非本科的學(xué)員程度還比較好。我改到最完美的那份作業(yè)，是香港一位剛畢業(yè)的企劃人員，也非設(shè)計(jì)系出身。

  不要用平面設(shè)計(jì)的思維做UI，不少設(shè)計(jì)師在某個(gè)角度上呈現(xiàn)「放棄學(xué)習(xí)」的狀態(tài)。比如「合作項(xiàng)目」。他們認(rèn)為合作項(xiàng)目不就是一群人把項(xiàng)目做完，有什么好學(xué)的?設(shè)計(jì)師就顧好手上的工作畫(huà)美美的圖就好了。跟他討論功能、行為、狀態(tài)，會(huì)被抱怨這不是設(shè)計(jì)師的工作范圍，為什么要把工作推給他。

如果你遇到的設(shè)計(jì)師能討論問(wèn)題、知道什么叫功能、有邏輯、能講理，不會(huì)歪樓去該什么設(shè)計(jì)理念、這樣才漂亮、工程師不懂美學(xué)、工程師只會(huì)說(shuō)辦不到。請(qǐng)好好珍惜，這是稀有動(dòng)物。即使對(duì)方嫩了點(diǎn)也沒(méi)關(guān)系，可以教得會(huì)的嘛!(遇到無(wú)法用道理和邏輯溝通的就算了，教不會(huì)的，他也不見(jiàn)得想學(xué)。)文章轉(zhuǎn)自網(wǎng)絡(luò)。

成都網(wǎng)站設(shè)計(jì)知名企業(yè)創(chuàng)新互聯(lián)，專業(yè)網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)多年，技術(shù)與實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，可根據(jù)客戶具體需求設(shè)計(jì)出最符合用戶需要的網(wǎng)站或設(shè)計(jì)產(chǎn)品，歡迎咨詢了解。

網(wǎng)頁(yè)名稱：成都網(wǎng)站設(shè)計(jì)：UI設(shè)計(jì)師容易忽略的四大問(wèn)題
當(dāng)前鏈接：http://jinyejixie.com/news21/295921.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、服務(wù)器托管、軟件開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)