您現在的位置是:電腦技術吧?>? 組裝維修 ??>??設計師容易嗎,設計師??>??正文詳情

設計師容易嗎,設計師

天語薇2019-11-18 01:10:35 人圍觀
簡介千圖設計師我見過這么多這樣的設計師,他們從來沒有想過“如果這樣交設計稿,工程師就做不出來”的問題,他們不愿意理解什么是“限制”和“規則”。如果你想從一個平面設計師

我遇到非常多這樣子的設計師,他們從不考慮「這樣設計稿交出去,工程師做不做得出來」的問題,也不愿意去了解什么叫「限制」和「規則」。

如果你也想從畫圖標的變成UI設計師,這篇干貨千萬要收藏。

  「這樣做比較漂亮啊!」  「這樣做比較美啊!」  「使用者喜歡這樣子啊!」  (設計師指 UI 設計師,我懶得打這么多字。

)  可行性  輪胎為什么不可以做成三角型?三角型比較帥啊!

  想了解 UI/UX,就一定要了解這張圖,這是 Jesse James Garrett 在 2000 年發表的用戶經驗元素一書中所提出:使用者的經驗可分成抽象到具體,也就是由策略、范圍、結構、骨架、表層所構成。

圖片上有原作者的說明大家自己看吧。

  這張圖是同一位作者提出的概念,同樣他也寫了很多說明,大家還是自己看吧。

  這篇文的重點從這里開始,我擅自把兩張圖合在一起比對,原始圖檔是分開的。

合并后可以清楚看到每個階段包含的面向。

以下是我自己的分析和筆記心得。

  策略  使用者需求和開發的目的。

  用戶需要什么、建立這個 App/Web 的目標是什么,這些都是整個項目最底層的根基,也是一切發源的基礎。

基礎不穩越往上發展問題就會越多越大,所有炫又酷的接口、多到爆炸的功能通通比不上這個階段的重要程度。

搞不清楚這個項目的目標是什么就貿然開發嫌錢多燙手可以捐給我,我好想去捷克看慕夏。

這個階段主要活躍的角色會是 BD、PM、UI/UX。

有時候 PM 和 BD 不那么清楚要怎么問才能從「出張嘴」的金主口中挖出開發所需要的情報,可以把這份工作交給 UI/UX,在這個階段加入 UI/UX 做訪談得到更多的信息,能減少未來開發遇到問題的機率。

  比如客戶說「我要能查詢美食餐廳、要有會員系統、能有社交功能」。

這聽起來超龐大的對吧!但實際上客戶想要的搞不好就只是個列表、關鍵詞查詢熱門餐廳信息,賬號串接 FB 后能對餐廳按贊或按干這樣而已,項目規模瞬間縮小很多。

  范圍  找出需求與目的后以需求為基礎,整理出所有用戶可能會需要的信息及功能,以愉快且有效的運用各種功能為出發點建構合理的互動模式與流程。

  這個階段就是把抽象需求內容轉成可實行的功能,并訂定出 Spec。

把所有需要的信息、功能等全部列出,并歸納分類,以「策略」層決議的目標和需求為出發點,考慮各種操作方式。

(再強調一次,同樣都是音樂播放器,列表型的和很炫型的就算功能大同小異,操作方式和接口設計還是會差很多。

)  把所有可能會用上的功能、所有必需呈現的信息、圖片等等全部用樹形圖條列出來,方便 UI/UX 未來畫 UI Flow、方便 SA 制定 API ,也方便 RD 計算人日、PM 控管項目時程,好處多多。

發現沒?這階段就是在做 Functional Map 啦!  結構  把所有信息整合起來,依用戶能直覺理解的方式組織成完整的概念。

  既然「范圍」層在制作 Functional Map,那「結構」層就是在做 UI Flow 了,這個階段必需定義信息、功能等要用什么方式呈現。

比如說 iPhone 上小張的美食照片只是預覽功能、需要「開大圖」,那大圖要怎么個開法?點擊放大?只放大單張圖嗎?需不需要 Page Control ?還是在該頁把手機橫拿就會自動把圖片放大滿版?這階段訂定的 Flow 會左右界面的長相。

  骨架  結合接口設計、信息設計、導覽設計三者將信息做可視化的呈現,協助用戶理解信息。

  畫 Wireframe 的時候到了。

之前已寫過很多關于 Wireframe 的文章,就不多廢話。

  表層  以視覺與感覺為基礎,設計接口元素如文字、頁面的視覺圖像、導覽組件等。

  簡單來說就是「最終這個 App/Web 要帶給人什么感覺?」要注意的事項太多了,Guideline、UI Style、Graphic上 Dribbble 看看高手們的作品找靈感吧。

在這階段牽涉的東西非常廣泛,不止是視覺,連聲音、震動等等都可包含在內。

只字詞組無法完整表達,有機會我再寫新的心得文章(又在挖坑了)。

  當你看到這行字,表示文章已大略看過,多少了解我想表達什么。

請卷到最上層重看一遍 Jesse James Garrett 提出的這 2 張圖。

相信能夠更理解用戶經驗元素和實現方式。

  題外話:有沒有發現什么端倪了呢?當手上的理論和資料一筆筆分開來看都沒什么感覺,整理分析后再合在一起就很有種「天下武功出少林」的感覺。

說穿了天底下所有的事都有一定的軌跡可循,包含 UI/UX 。

很多大師的理論資料看到后來都在講同一件事情,只是舉的例子、切入角度、實行的手法略有不同罷了。

就跟無論什么項目、拆分到最后就只是「需求」和「功能」一樣。

  使用者經驗元素很明顯就說了,視覺設計在最后一層。

不過我遇到的設計師不少都喜歡從五樓開始蓋,蓋完五樓再回頭打地基。

他們覺得只有第五層的視覺才是設計師的工作,其他都與他無關。

  可行性?當然不是設計師的工作?,這不是工程師要處理的嗎?  我遇到非常多這樣子的設計師,他們從不考慮「這樣設計稿交出去,工程師做不做得出來」的問題,也不愿意去了解什么叫「限制」和「規則」。

認為自己設計出來的東西就是要 100% 完整呈現,辦不到就是工程師能力差,所以在 RWD 上驕傲自己有像素眼和 F2E 在刁 1px 的差距。

  很多設計師只想追最新版軟件,跟他說 HIG 有最新版要不要多少瞄一下他會翻白眼給你看。

常炫耀自己第一手掌握 XX 大師出新作品,高手給你小畫家都能畫出蒙娜莉薩,XX 大師的作品也不是你的作品有什么好得意的?讓別人覺得自己品味非凡高格調?  別理別人怎么樣了,管管自己做出來的圖稿會不會整死工程師先吧很多時候不是美不美的問題,是各種限制辦不到啊!  視覺至上  廣告會破壞美美的畫面,拿掉啊拿掉!  「為什么要放廣告?不管是使用者調查或是實驗,他們都討厭廣告啊!為什么不拿掉?」  「放了廣告超丑的,破壞版面美感。

」  「他們都不懂設計,硬要放廣告,設計師講話根本不被重視。

」  先生/小姐,公司營運非常燒錢的,很多公司甚至得靠廣告補貼,你不放廣告是不想領薪水了嗎?  原本以為是個案,沒想到還不只一位設計師這樣想。

不懂功能就算了,連自己的薪水怎么來、公司靠什么賺錢都不知道只會注意視覺,其他都事不關己的 設計師 美工 在公司講話沒地位,理所當然的事情。

  在工程師眼里,只會做視覺,其他都不懂也不肯學的不配稱為設計師,就是美工而已。

  無視數據源  開水龍頭就有水啦,管線?又不關我的事。

  這是我最痛恨的設計師行為之一,認為數據源不關自己的事。

以前參加過這樣的設計會議,一群設計師圍起來討論字體、顏色、圖片風格就是沒人討論數據怎么來。

我覺得奇怪就問了句,被當來鬧場的,說數據源是工程師的事。

  靠北,怎么不關 UI 設計的事,關系可大的咧!  一張圖片是內建、還是網絡更新下載?內建在 App 里的話好辦事,需連網絡下載的圖片需不需要思考多種狀態?  理想狀況(正常連網情況下顯示的圖。

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

)  默認圖片(例:使用者未上傳頭像時,FB 大頭照要放哪張圖?)  發生錯誤(圖片掛了讀不出來,常見于網頁。

)  這些在不在 UI 設計師的工作范圍?是啊,那數據源為什么設計師可以不用理解,推給工程師懂就好?不知道數據源要怎么設計 UI?  邏輯?

可以吃嗎?

  能用道理溝通的設計師是個寶。

  UI 設計是非常吃邏輯思考的一門學問,改了上百份學員作業后覺得,設計本科生在思考功能、Flow 上的表現很差,反而非本科的學員程度還比較好。

我改到最完美的那份作業,是香港一位剛畢業的企劃人員,也非設計系出身。

  不要用平面設計的思維做 UI,不少設計師在某個角度上呈現「放棄學習」的狀態。

比如「合作項目」。

他們認為合作項目不就是一群人把項目做完,有什么好學的?設計師就顧好手上的工作畫美美的圖就好了。

跟他討論功能、行為、狀態,會被抱怨這不是設計師的工作范圍,為什么要把工作推給他。

  如果你遇到的設計師能討論問題、知道什么叫功能、有邏輯、能講理,不會歪樓去該什么設計理念、這樣才漂亮、工程師不懂美學、工程師只會說辦不到。

請好好珍惜,這是稀有動物。

即使對方嫩了點也沒關系,可以教得會的嘛!(遇到無法用道理和邏輯溝通的就算了,教不會的,他也不見得想學。

)

版權聲明:本文由 天語薇 整理編輯。

原標題:設計師好嗎,做設計師好不好

轉載注明出處:http://www.dn9ww09s.icu/assemble/13343.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 半透明頭像生成器,微信半透明頭像生成器

    半透明頭像生成器,微信半透明頭像生成器 相關圖片半透明頭像上傳軟件當你通過微信或QQ與朋友聊天時,你會發現一些朋友的頭像是半透明的,獨一無二的。那么,如何制作他們半透明的化身呢?如何制作半透明的化身?首先,半透明的...

  • 如何設置自動換行,exel怎么設置自動換行

    如何設置自動換行,exel怎么設置自動換行 相關圖片自動換行在哪我沒想到Dreamweaver的菜單排放這么糟糕。經過兩天的搜索,我找到了這個選項。。。選中代碼視圖選項,自動換行上方的操作需要處于代碼源文件狀態怎樣自動換行...

  • 安卓sync什么意思,radkfz是什么病毒

    安卓sync什么意思,radkfz是什么病毒 相關圖片locationemAndroid同步服務是Android系統的同步服務,可以同步通訊錄、電子郵件、日歷等設置。一些用戶對Android同步服務停止等錯誤感到困擾proxyhandler...

  • 水晶質感圖標,水晶之痕圖標

    水晶質感圖標,水晶之痕圖標 相關圖片寶石圖標效果圖:用路徑畫出這樣的圖形,然后用漸變復制一個,稍微偏移,如漸變用濾鏡和高亮:也用刀復制一個,用刀切一半,做筆:復制筆尖和筆桿之間的骨線,用刀切一半,然...

  • 副本不是正版有影響嗎,win7正版永久激活密鑰

    副本不是正版有影響嗎,win7正版永久激活密鑰 相關圖片win7盜版黑屏如何修復近日,不少小伙伴反映,安裝win7系統后,系統提示此windows拷貝不是正版。如果此windows副本不是正版,如何解決此問題?這個不是正版windows的拷內部版本7601有影響...

  • 手機怎么看eml格式,eml是什么格式文件怎么打開

    手機怎么看eml格式,eml是什么格式文件怎么打開 相關圖片手機打不開eml文件最近,很多小伙伴都說他們在工作過程中收到了重要的EML文件,但是他們不知道EML是什么格式的?如何打開EML文件?然后,超人軟件會給你帶來EML文件的相關教程,蘋...

  • html繪制到canvas,html5canvas繪制效率

    html繪制到canvas,html5canvas繪制效率 相關圖片html2canvas行星變量名為mercury87.70×a69697×5c3e40 Venus 224.701.70×c4bbac×1f1315 earth 365.2422×7canvas html5...

  • 360怎么開無痕瀏覽,360無痕瀏覽怎么取消

    360怎么開無痕瀏覽,360無痕瀏覽怎么取消 相關圖片360極速無痕瀏覽不想讓人們知道他們瀏覽了什么網頁,清除緩存和cookies太麻煩了。那么360無痕瀏覽就可以很好地滿足你的需求無痕瀏覽,又稱私密瀏覽模式和隱形窗口,指的是不留任...

  • web表單,表單大師

    web表單,表單大師 相關圖片css表單這篇文章是作者交上來的一本筆記。我和客戶關系管理系統打交道很久了。我每天都看到表格。如果形式有感覺,我想它不想再看到我了。此外,老板推薦了一本書“網頁形式設...

  • morphvoxpro怎么用,morphvox pro好用嗎

    morphvoxpro怎么用,morphvox pro好用嗎 相關圖片morphvox怎么用到游戲里想要通過改變聲音來欺騙朋友的用戶不應該錯過MorphVOX pro。Morphox Pro是一款非常有趣的語音轉換軟件,它可以幫助您使用QQ、YY、Skype或morphvox筆記本怎么用...

熱評文章

  • 比鄰,比鄰現在叫什么

    比鄰,比鄰現在叫什么 相關圖片比鄰的意思比鄰是一款非常受到歡迎的即時通訊軟件,最近有不少朋友表示想取消關注舊好友,重新關注新朋友。那么比鄰怎么取消關注?比鄰怎么加好友?下面,就跟著超人軟件小編一起...

  • wifi會泄露上網記錄嗎,360家庭防火墻怎么開

    wifi會泄露上網記錄嗎,360家庭防火墻怎么開 相關圖片ensp防火墻配置實例最近,很多小伙伴都說,他們經常聽說電腦需要設置防火墻,但他們不知道防火墻有什么用?防火墻設置在哪里?下面,超人軟件小編將為您解答防火墻的相關內容,...

  • HTML 表格,html5 表格

    HTML 表格,html5 表格 相關圖片web文檔表格Style {font size: 12px}. Drag {font size: 12px; margin bottom: 5px;} TD {verticahtml建立表格...

  • xinput13dll,找不到xinput_3dll

    xinput13dll,找不到xinput_3dll 相關圖片3d溜溜最近,很多朋友說,他們在安裝LOL、魔獸、頂級飛車和其他大型游戲后,暗示了新PUT1 3.DLL的丟失。XPUT1 3.DLL在哪里?新普特1丟失3 dll...

  • 怎么上傳應用,上傳應用

    怎么上傳應用,上傳應用 相關圖片什么軟件可以上傳長視頻進入“管理您的應用程序”頁面后,單擊您創建的應用程序圖標進入應用程序主頁,如圖所示,您可以在應用程序主頁中看到應用程序的基本信息。右上角的按...

  • 無痕瀏覽怎么設置 iphone,蘋果無痕瀏覽怎么設置在哪里

    無痕瀏覽怎么設置 iphone,蘋果無痕瀏覽怎么設置在哪里 相關圖片破解全部黃盒無痕跡瀏覽是瀏覽器上網的一種方式。通過此模式,瀏覽網頁后不會生成任何記錄。那么如何設置無痕跡瀏覽呢?無痕瀏覽真的無痕嗎?接下來,超人軟件編輯將為您一一...

  • win7語言欄修復,win7語言欄不見了怎么調出來

    win7語言欄修復,win7語言欄不見了怎么調出來 相關圖片中文輸入法不見了語言欄是win7中一個非常重要的功能,它可以幫助用戶設置輸入方法。如果win7語言欄不見了怎么辦?如何調整win7語言欄?讓我們跟隨超人軟件編輯器來了解它windows8語言...

  • 的和地的用法,的得地的用法

    的和地的用法,的得地的用法 相關圖片an的用法瀏覽器中的瀏覽器非常適合iframe frameBorder=0 width=170 height=100marginheight=0 marginwidth=on的用法...

  • 怎么設置隱藏文件夾,怎樣隱藏文件夾

    怎么設置隱藏文件夾,怎樣隱藏文件夾 相關圖片電腦隱藏文件夾怎么顯示當系統處于安全考慮時,它將隱藏系統的一些關鍵文件和文件夾。當我們需要對這些文件執行某些操作時,首先需要顯示這些隱藏的文件夾。如何顯示隱藏文件...

  • 院感基礎知識培訓小結,黨的基礎知識培訓小結

    院感基礎知識培訓小結,黨的基礎知識培訓小結 相關圖片院感知識培訓小結及效果評價現將畫布的知識點總結如下,供大家隨時參考。一。填充矩形圓角矩形(x,y,寬度,高度);2。繪制矩形邊框strokrect(x,y,width,height);3黨的基本知識...

關注微信

变脸官网查询