無損圖片的介面製作方式(下)

之前在無損圖片的介面製作方式(上) 提到製作 App 介面時會面臨各尺寸螢幕解析度不同的問題,PSD 需要放大縮小使得最後產出得切圖模糊失真。本文將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。

無損圖片的介面製作方式(上)

目前市面上最常見的被用來設計 APP 介面軟體為 Adobe 的 Photoshop 和 Illustrator。Illustrator 屬向量軟體,不管再多次的放大縮小,向量圖的質量不會因此改變。Photoshop 是繪圖影像處理軟體,像素圖片一經放大縮小後畫質會變差,偏偏目前 iOS 需製作 2 種、Android 至少也要作 3 種尺寸的圖檔,有時候還會有不知道哪邊來的交辦要 UI 協助製作「等身高大 iPhone」。為了提升畫面的精緻度(和對付這種強人所難的需求),還是盡量以無損圖片方式製作圖稿、運用比較靈活。

UI 跟 RD 溝通的三個誤區

我相信一定有 RD 想砍了他們家的 UI,講話這麼風花雪月,有點邏輯概念是會怎樣。也一定會有 UI 想撬開他家 RD 的腦袋,都用這麼多形容詞和例子說明了怎麼還是聽不懂,腦袋有洞喔。這其實真的不能怪 UI 或是RD,他們本身的思考迴路本來就不一樣。達文西這種超神級人物有史以來也就這麼一位,(他是畫家、雕刻家、建築師、音樂家、數學家、工程師、發明家、解剖學家、地質學家、製圖師,植物學家和作家),要求平凡人等文武全才也太超過了。

這篇文目的在分享和 RD 相處的經驗(順便捅我家老公),不代表所有RD 都是這麼缺筋,RD 也有百百種人啊。

十大易用性原則

身為 RD 的你受過太多 UI 的氣嗎?老是發現邏輯不通需要打掉重練被延誤時程嗎?常被 UI 嫌念理工的沒有美感都不懂嗎?報仇的時間到了。這篇文雖然說是「十大易用性原則」,也可以說得上是:「教你如何捅 UI 」。RD 最擅長講理,就來跟 UI 講理!從易用性下手找 UI 麻煩,沒有幾位 UI 不中刀的…

什麼是 Wireframe ?


老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了!每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」,卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊!

為什麼要畫3次 Wireframe?


每個新案子進來,我通常會畫至少 3 次的 Wireframe,記錄靈感 > 完整繪製 > 電子化。好像重工了喔?可是你哪來的自信覺得設計 App 介面能一次到位呢?靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況,畫 3 次以上的 Wireframe 比較保險。

UI 和 RD

幾乎每個面試官都會問我:「妳和RD的溝通情況如何?」我通常會反問:「都嫁給 RD 了,你覺得我和 RD 溝通情況怎麼樣?」不管是在家或是在工作,我整天都和 RD 相處啊!但即使和老公很有默契,遇到夫妻吵架,還是會大喊:「RD 的腦袋真不知道在裝什麼。」

三年前,三年後

結束近3年的接案公司App製作生涯,轉向開發公司自有產品。寫這篇文的同時,RD 老公正窩在旁邊玩他的魔獸卡牌 OLG ,想起當年我的 UI 是被這位 RD 海電練出來的。