Web、App介面設計表現及應用差異

以公司專案為例，分享UI設計心得

透過工具、尺寸、規範、設計，以及遇到的問題等等，來比較兩者的相似處與相異處。

使用工具

Web

主：Photoshop 輔：Illustrator

由於海棠早期就使用Photoshop設計網站，加上客戶要求的原始檔案也是psd居多，所以到目前為止Photoshop還是海棠常使用的設計工具之一。

優點：
可直接處理影像效果，例如：合成、渲染、變形、濾鏡等較複雜的效果。

缺點：
(1)無法編輯嵌入的向量圖。
(2)前端工程師需要自己裁切圖片，向量圖也要另外處理，比較耗時費工。

App

主：Sketch 輔：Photoshop 、 Illustrator

介面簡單易懂。如果有Illustrator的基礎，那Sketch對你來說一點也不難，非常好上手。

優點：
(1)可直接編輯嵌入的向量圖，相當方便。
(2)可個別設定切圖的對象與範圍，本身就能輸出不同格式與尺寸的圖檔。
(3)可透過Zeplin，直接下載設定好的圖檔。這對不懂Sketch和Photoshop的工程師來說非常便利。
(4)可做成Symbol，方便協作與維護。
(5)可轉成Photoshop檔。方便沒有Sketch的客戶們使用。

缺點：
(1)Sketch只能在Mac上使用。
(2)影像處理的功能偏少，還是需要photoshop。

綜合以上的比較，Sketch的好處比Photoshop來得多。習慣了，反而喜歡Sketch乾淨直覺的操作介面。如果是量多或者需要協作的網頁專案，不妨嘗試使用Sketch來設計看看。

後起之秀 Figma

真正是學無止盡，當熟悉一個工具時，馬上就會再出現其他更新更好的新工具來，Figma就是其中一種。

Figma的使用方式類似Sketch，所以只要你會Sketch，基本上不需要擔心如何使用(太好啦)。

優點：
(1)可跨平台使用，Mac和Windows以及Linux系統都可使用。
(2)協作上更為清楚，立即性的反饋與溝通，讓設計更加順利流暢。

缺點：
需要上網，網路不好無法順利編輯。

跟Sketch相似，但更適合團隊合作使用。
越來越多企業使用Figma，那不如一開始就熟用這套工具。
所以，海棠今年也開始使用Figma來取代Sketch，等熟悉一點再跟大家分享使用心得。

尺寸大小

預設尺寸

Web
以寬度1920設計Mockup(設計稿非網頁)。
另外設計手機版本(寬度375)，供客戶與前端參考。

App
以iPhone 11 Pro(375x812)進行設計。

尺寸問題

Web
當內容一樣時：
螢幕解析度越高時，內容會相對縮小。
反之如果解析度較低時，看到的內容就會放大。

當客戶使用低解析度的螢幕校稿時，有時收到的反饋會是：整體有點大耶，需要再縮小些！！其實這是雙方不同解析度所造成的誤解。

這邊就先提到RWD(響應式網頁)，RWD意思是指切版成網頁後，在指定的螢幕解析度內，內容會變化縮放(大小、間距、排列方式)，以符合螢幕整體畫面大小。
（如下圖所示）

不過因為Mockup是張圖無法變化，客戶又不清楚RWD的情況下，建議設計前，一定要再確認清楚，在相同的解析度下觀看，雙方比較不會產生誤解，事前做好確認、避免重工喔。

App
比較沒有上述Web的問題。
由於畫面較小，用電腦以及手機校稿，都比較正常順利。

設計編排

前端框架對Web的限制

以foundation，12網格為例：

雖然有Grid的限制，但設計時並非一定得要塞的滿滿地，適當的間距是沒關係的，位置也可以上下移動變化，不用過於死板。

必須考量響應式的變化，事先規劃好變化後的欄位數，避免造成破版或者內容變得太空洞。

也因為前端框架的限制，所以Web在某方面也是照個規則走的，偏離太多可是會受到前端工程師的白眼喔ＸＤ

背景

Web
螢幕寬度超過1920的情況，表現方式可以分為：
(1)內容滿版延伸，隨著螢幕大小縮放，不需要另外設計背景。
(2)內容置中背景滿版，適合營造氛圍，利用局部空間表現創意等等。

螢幕寬度低於內容寬度時，就自動變成滿版。

App
以375x812為範例，內容幾乎是滿版的狀態了，建議背景單純就好。
可以利用局部視覺做出空間感。

間距

Web
區塊間的距離拉高，增加更多留白空間，不僅視覺瀏覽上較為舒適，整體呈現上也較有大器感。
利用相互堆疊，塑造空間維度，讓畫面不只是單一平面，多點層次表現。

App
資訊集中清楚為重點，間距不宜過多，適當即可。避免點擊範圍過小，發生誤觸/點擊困難等情況。

整體

Web
不論是利用背景情境圖、紋路、插畫、細節質感、大小比例、漸層、光暈、陰影等等，只要是讓視覺加分的，都可以適當的添加，比較沒有什麼限制。

App
不需要刻意表現視覺，反而要往內收斂。會影響到閱讀的設計，都需要簡化。畢竟App的空間已不多，多餘的設計就像畫蛇添足，多此一舉。

例：工具類型、功能性導向的App，更是強調清楚簡單好用。

例：下方第二排使用簡化的Icon，感覺更有國際感。

向量化

Web/App
向量插畫不見得比較好看，有些造型甚至讓人覺得怪異。但跟一般點陣圖片相比，會顯得比較不一樣與不常見，尤其是自己手繪的插畫更是獨樹一格。
在想與其他同類型的設計做出差異時，使用插畫是很好的選擇喔。

手機版與APP

不論大小還是畫面都滿類似的，不過還是有幾個地方不同：

(1)手機版網頁延續電腦版，大部分內容無法更改，資訊呈現會稍嫌複雜、操作與互動上也稍有不同。
(2)手機版網頁沒有Tab Bar(App大部分都有)。
(3)App整體簡化許多，感覺比較俐落直覺。

結論

Web空間大，視覺比較好發揮，但是要把所有元素區塊統一融合在同個網頁裡，並且呈現出同個風格調性，這也是非常有難度的。

App雖然小，但要在有限的空間裡表現出該專案的特色風格、並且要清楚好用，並沒有比Web簡單喔。

兩者的難度差不多，但設計所花費的時間，Web遠遠勝出，也難怪設計師開玩笑的說，給我App專案，我不要Web… XD～

謝謝妳/你看完了這篇分享文章 : D

如果喜歡我們的文章，請給一個👏或超多個👏👏👏👏👏，也歡迎追蹤或是來我們網站逛逛，感謝閱讀。