[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看
記得我剛踏入 UI 設計這行的時候,也常容易犯錯很多小細節,而且我覺得做為UI真的除了配合設計美感之外,也要了解圖層的結構和圖檔的命名以及網頁和手機規範等等都是非常重要的,加上我覺得做為網頁UI的圖層架構不會像遊戲設計的那麼華麗與複雜,所以在很多UI介面上,遊戲的UI技術會較高許多,也漂亮許多更無法被人家容易抄襲和模仿,在這些初學者剛進入UI設計師的路程,我有一些經驗要講:
1.UI 容易犯的錯誤-忘記打包文件
UI容易犯的錯誤最常發生就是通常我在打包文件,我會給一張完稿圖(設計示意圖),完整尺標標線圖,其他切完的圖(png.jpg….等等)
很多設計師,都會遺漏這個icon要切圖,又或者是在做hover時忘記把變化的icon也忘記切出來,導致會一點設計得前端還要幫你處理圖片,這個我就有遇過以前公司的前端抱怨,因為公司的前端非常厲害,會設計又會寫代碼,但是因為他的UI老是遺漏效果的圖片掉東掉
西,導致於他每次都要自己變成美工弄圖片的私下抱怨,所以作品交出去前,一定要再三檢查有沒有遺漏,當然前端其實也義務跟UI提要求的,但是因為UI妹妹年紀太青怕被念哭跑,所以前端默默的…..變美工了。
2.UI 容易犯的錯誤-PSD檔案的圖層結構亂七八糟,看不懂圖層結構命名亂七八糟
沒錯!這點真的讓我覺得,如果要看一個是不是很高階UI,通常面試作品我會先看他的原始檔案PSD圖層整理
因為我覺得不管圖片做得多美,但是如果圖層亂到連自己都找不到,甚至會整理自己圖片順序,命名很整齊有規範和群組結構,不管是幾年前的檔案拿出來改,
都還是可以一目了然圖層結構,切圖的時候也不會切得亂七八糟。
做圖的時候一定要保持要有命名習慣
- 以前我也會下載國外的UI模板,來研究國外的人怎麼做設計命名,非常易懂,因為國外都使用英文我覺得真的很方便,切圖命名可以很快轉換為前端使用的圖片規範,但是我們使用中文的話,(順便學英文)也是可以把群組寫文中文,其他圖片可以寫小寫英文,也方便。
切圖命名,盡量不要覺得麻煩改圖層黨名,在圖層數量較少的時候可以使用直接選擇工具來選擇圖層,但是一旦做網頁版圖層很多,甚至500-600多層,要找到一個特定圖層可能就會變得困難了,對每一個圖層進行精確命名可以有效防止混亂,說真的我很討厭看到UI容易犯的錯誤UI還命名“圖層1 副本”或是矩形 1.2.3之類這種”哀…看到這種命名圖層真的要把你踢出去了。必竟如果之後是做到大遊戲的專案,這樣的命名真的會找死!!!!找到隔天都找不到的!!! - 圖片做完要有習慣群組分類或是標記顏色等等,這樣找網頁的區塊就可以直接找到馬上改。
3.UI 容易犯的錯誤-智能參考線與輔助線對齊,字體或是圖標大小才會整齊
對齊的基本方法就是使用參考線做設計,對齊網格,對齊每一個像素,因為一個像素還是會影響整體美觀
有些人做的圖看起來就是哪裡不對,就是因為不整齊的一個小小錯誤,就會影響全部,善用於對齊功能,還有字體在設定大小時,在做手稿的時候就要有規範定義出來,之前有檢查到一個UI的圖檢查到1PX顏色不一樣我就退回去,請看我的圖解說明,一像素的差別,甚至我覺得很多高端的UI也會犯錯,我有遇過一個很高端的大陸設計師,他不只在知名店商工作還自己開公司,他說,連這一像素都是很重要的,你以為縮小就看不出來嗎,當你放大做到每個像素都是要求高規格的,那麼你的圖就會很完美很漂亮,因為我很要求連1PX都無法放過的高規格,所以我們做圖一定要放大放大大看放大檢察!!!
4.UI 容易犯的錯誤-刪除不必要的圖層
說到外行人,他們總是看到輸出jpg檔案是多麼光鮮亮麗,但是碰到我這個檢察官,看到PSD檔案覺得下地獄
UI容易犯的錯誤:我有時候看到命名亂七八糟,又一推空白圖,真的覺得這個人一定超懶,又不細心,因為總是會看到部分UI會有一些怪圖層在上面,用不到的圖層,或是破碎圖片(修圖一半不知道是要幹嘛的?甚至還有整張圖片的臉是破掉的…….)沒用掉也沒刪除,而且多餘圖層會讓文件檔案變大許多,導致打開速度變慢。
5.UI 容易犯的錯誤-不要亂拉圖片,導致變型或是失真
能夠以矢量圖是最好的,並且在變形操作時保持其比例
請按Command + T (MAC)或是CRTL+T (Ctrl T,Free Transform in Photoshop) 出現了變型框框後按住Shft一起拉,避免出現變形,甚至建議不是矢量圖的話不要過度放大到置失真。
以上這幾點是我覺得滿重要的幾點要注意,給新手UI的建議,在菜也要裝高手UI不會犯的錯!!!!
海外工作技術相關的友情連結:
如果你有技術類別.前端,後端,手機端,可以看看他的網站,他有一年半以上菲律賓經驗,有問題可以跟他一起討論喔
就一衣X旅遊X工作X技術討論
[菲律賓工作] 來菲律賓工作讀者問答回復-薪資待遇.攜家帶眷.房租.物價.工作環境.升遷.同事 薪水可以拿多少?
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 6 36592740924 8b40ea15c2 o](https://i0.wp.com/farm5.staticflickr.com/4352/36592740924_8b40ea15c2_o.jpg?w=640&ssl=1)
[菲律賓工作]如果你無法忍受這些,那就不要來菲律賓工作5大抱怨&讀者來信工作疑問請益
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 7 51321121](https://i2.wp.com/himydream.me/wp-content/uploads/2017/08/51321121.jpg?fit=798%2C515)
[海外工作] UI/UX 設計師海外工作面試經驗心得記錄 2016-2017
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 8 54454545445](https://i0.wp.com/himydream.me/wp-content/uploads/2017/08/54454545445.jpg?fit=798%2C515)
[菲律賓工作] 馬尼拉工作 徵求台灣人 電銷人員 客服 半年休假15天 包含機票住宿簽證 福利好門檻低工作 菲律賓找工作必看
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 9 53413](https://i1.wp.com/himydream.me/wp-content/uploads/2017/08/53413.jpg?fit=798%2C515)
[海外工作] UI經驗談 新手UI遇到的問題 國外設計工作經驗談 遇到技術差的主管要不要辭職呢?各種問題討論
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 10 454354321](https://i0.wp.com/himydream.me/wp-content/uploads/2017/08/454354321.png?fit=798%2C515)
[菲律賓工作] 來菲律賓工作400天的心得感想,一點也沒以覺得去澳洲打工比較好,為什麼? UIUX工作海外工作經驗談
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 11 45454445](https://i2.wp.com/himydream.me/wp-content/uploads/2017/07/45454445.jpg?fit=798%2C515)
[留學日記/海外工作] 到國外工作必帶台灣好吃食品與醬料 , 台灣必買伴手禮給外國人推薦 想念家鄉味道絕對不能錯過的愛吃經驗談
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 12 54131321321312](https://i1.wp.com/himydream.me/wp-content/uploads/2017/07/54131321321312.jpg?fit=798%2C515)
[ 菲律賓工作 ] 菲律賓工作存得到錢嗎? 各種菲律賓工作職缺問答 網友來信 QA回答 菲律賓工作經驗談
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 13 543412](https://i0.wp.com/himydream.me/wp-content/uploads/2017/07/543412.jpg?fit=798%2C515)
[海外工作] 海外工作經驗談 關於海外工作的勇氣,努力堅持下去的毅力,只要堅持自己的目標和原則還有一顆莫忘初衷的心
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 14 9999 1](https://i0.wp.com/himydream.me/wp-content/uploads/2017/06/9999-1.jpg?fit=798%2C515)
[菲律賓工作] 如何在菲律賓找工作 ,菲律賓台灣人招聘, 如何跳槽,歡迎大學生加入,客服,電銷,市場,技術JAVA UI 美工,SEO 網管
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 15 88888 2](https://i1.wp.com/himydream.me/wp-content/uploads/2017/06/88888-2.jpg?fit=798%2C515)
[菲律賓] 菲律賓宿霧巴拉望長灘島馬尼拉 GLOBAL手機網路費率 菲律賓網路吃到飽 套餐推薦 菲律賓工作旅遊必看
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 16 99999](https://i2.wp.com/himydream.me/wp-content/uploads/2017/06/99999.jpg?fit=798%2C515)
[ 菲律賓工作 ] 雲頂賭場襲擊 事件的新聞 , 生活環境與治安 馬尼拉現在安全嗎? 來菲律賓工作前必看攻略
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 17 999999](https://i0.wp.com/himydream.me/wp-content/uploads/2017/06/999999.jpg?fit=798%2C515)
[菲律賓工作] 公司的福利 包吃包住 廚師煮飯與外食 菲律賓物價高 -餐補津貼篇
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 18 555](https://i1.wp.com/himydream.me/wp-content/uploads/2017/05/555.jpg?fit=798%2C515)
[菲律賓工作] 海外住宿心得感想 SOUTH OF MARKET PRIVATE RESIDENCES ,ORTIGAS SOHO CENTRAL,SHELL RESIDENCES,SEA RESIDENCES,THE COLUMNS MAKATI 竹子樓 ,SM JAZZ RESIDENCES
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 19 999999 1](https://i0.wp.com/himydream.me/wp-content/uploads/2017/05/999999-1.jpg?fit=798%2C515)
[ 菲律賓工作薪資 ]關於菲律賓的工作經驗談_薪水分析篇2
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 20 %E6%9C%AA%E5%91%BD%E5%90%8D 2](https://i0.wp.com/himydream.me/wp-content/uploads/2017/05/%E6%9C%AA%E5%91%BD%E5%90%8D-2.jpg?fit=798%2C532)
[ 菲律賓工作 ]海外找工作求職路程經驗談,台灣人不敢跨出去海外做想做的事!
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 21 1 1](https://i1.wp.com/himydream.me/wp-content/uploads/2017/04/1-1.jpg?fit=798%2C532)
[ 海外工作感想 ]-台灣企業給不起,也不尊重技術,誰想繼續在台灣?(原因)
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 22 1](https://i2.wp.com/himydream.me/wp-content/uploads/2017/04/1.jpg?fit=798%2C532)
[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 23 5432147](https://i1.wp.com/himydream.me/wp-content/uploads/2017/04/5432147.jpg?fit=600%2C365)
[UI容易犯的錯誤],字體規範,字體用戶體驗IOS,ANDROIDY字體預設,UI自學!
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 24 234](https://i0.wp.com/himydream.me/wp-content/uploads/2017/03/234.jpg?fit=2374%2C1917)
UI設計師 – MOCK UP 是什麼?
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 25 789 1](https://i2.wp.com/himydream.me/wp-content/uploads/2017/03/789-1.jpg?fit=956%2C540)
UI設計師 – WIREFRAME是什麼?
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 26 %E6%9C%AA%E6%A0%87%E9%A2%98 1](https://i2.wp.com/himydream.me/wp-content/uploads/2017/03/%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg?fit=798%2C532)
[ 菲律賓治安 ]可惡的菲律宾土匪文化,抢劫与小偷和恐怖的小孩
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 27 123](https://i1.wp.com/himydream.me/wp-content/uploads/2017/03/123.png?fit=798%2C532)
[菲律賓工作]第300天,菲律賓的生活紀錄,工作經驗紀錄
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 28 300](https://i2.wp.com/himydream.me/wp-content/uploads/2017/03/300.jpg?fit=798%2C532)
[海外工作]我來自台灣的UI/UX設計師,海外工作,使用者介面設計師經驗分享
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 29 UI 1](https://i1.wp.com/himydream.me/wp-content/uploads/2017/03/UI-1.jpg?fit=798%2C532)
[菲律賓工作]真實經驗敘述,海關扣留小房間的驚魂-遣返黑名單與保官問題處理(台灣人在菲工作必看)
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 30 1](https://i0.wp.com/himydream.me/wp-content/uploads/2017/02/1.jpg?fit=798%2C532)
菲律賓工作-過年後我和朋友一起從菲律賓返回台灣的時候 在2017.02月某天晚上 我做長榮航空抵Read More
[ 菲律賓工作經驗 ]半年第一次回台~終於放假了~~~~超開心
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 31 1 1 1](https://i2.wp.com/himydream.me/wp-content/uploads/2017/02/1-1-1.jpg?fit=600%2C400)
菲律賓工作經驗 半年第一次回台~終於放假了~~~~超開心 雖然之前有回去一趟 還有去了日本福岡 但是之前都是沒Read More
[ 菲律賓工作薪資 ]關於菲律賓的工作經驗談_薪水分析篇
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 32 1 3](https://i1.wp.com/himydream.me/wp-content/uploads/2017/02/1-3.jpg?fit=600%2C400)
[菲律宾生活]菲律宾安全吗?小偷与抢劫真的那么多吗?
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 33 1 6](https://i0.wp.com/himydream.me/wp-content/uploads/2017/02/1-6.jpg?fit=600%2C400)
[ 菲律宾工作 ] 来菲律宾工作210天生活的生活点滴记录
![[UI容易犯的錯誤]如何成為高級 UI 設計師,高級 UI 設計師一眼可以看出你的破綻,UI自學必看 34 366](https://i1.wp.com/himydream.me/wp-content/uploads/2016/12/366.jpg?fit=600%2C400)
![[菲律賓巴拉望科隆島]Palawan Coron Micasa Lodge CP值高便宜住宿民宿飯店 36 Palawan Coron Micasa Lodge](http://himydream.me/wp-content/uploads/2023/12/截圖-2023-12-22-下午11.10.25.png)
One Comment
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback:
Pingback: