避免將互動設計等同於介面設計,了解兩者差異

每次看到設計師只關注畫面美觀,忽略使用者互動,
我都想說:「別只顧著外表,內在互動才是關鍵!」

App設計中,反應與提示真的不重要嗎?

每次看到 App 沒有任何反應或提示,我都想問:「這是要我猜嗎?」
設計中,適當的反應與提示,能讓使用者操作更順暢,體驗更佳。

App設計中,真的可以忽視各種狀態與突發狀況嗎?

每次專案後期,RD 抱怨:「這狀況沒預料到啊!」設計時若忽略各種狀態與突發狀況,開發時就只能手忙腳亂地補救。

直式與橫式螢幕設計的挑戰與解決方案

每次看到使用者拿著手機,橫豎切換自如,我都在想:「他們知道這背後的設計巧思嗎?」
Portrait 和 Landscape。
螢幕方向不只是視覺上的轉變,更是使用者體驗的關鍵。

App 切圖命名真的不重要嗎?

每次看到設計師命名的「最終版_final_final2.png」,我都忍不住想翻白眼。
切圖命名沒規範,RD 找圖像大海撈針。
想讓專案順利進行?統一命名規則是關鍵!

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

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

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

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

測試:你對線框圖的了解有多深?

Wireframe 不是美感設計,而是 UI 的骨架。
還沒定好結構就談視覺?
就像地基沒打好,直接裝潢一樣危險!

三階段線框圖:提升UI設計精確度的關鍵

每次新專案,我至少畫三次 Wireframe。
重工?
不,這是避免設計踩雷的保險。想知道為什麼?
繼續看下去吧!