同樣是拼UI組件模板，為何效果相差那么大？

Sponsor

前言：隨著設計門檻的不斷降低，咱們對設計方案的要求反而要不斷提升，才能跟上時代的腳步?，F在有了優秀的UI組件，但不表示設計師就能直接拿來用，而不加思考，今天我們就來看看不同設計師，拼出來的模板是有什么區別吧！

有人說，現在工具那么發達，做設計跟拼組件差不多了。

但是事實如此嗎？

美圖秀秀沒有讓修圖師的工作量下降，剪映沒有讓剪輯師工作量下降，Midjourney更不會讓原畫師更輕松。

相反，隨著效率的提升，標準在不斷被拉高——原本的正常標準變成了現在的及格線，原本的高難度變成了現在的普通水平。

這就好比所有人都穿上高跟鞋后，高矮排名并不會因此而改變。設計組件，也是如此。當畫圖變簡單時，那么我們對其它地方的要求就會變高——例如，設計思路、對業務的理解、用戶體驗……

也就是說，隨著設計門檻的不斷降低，咱們對設計方案的要求反而要不斷提升，才能跟上時代的腳步。

這里有一位B端設計師做的方案，明顯是用 Ant Design 組件“拼”出來的。

但看起來，是不是有點兒“落后于時代”的感覺？

問題非常多，我隨便羅列幾個明顯的：

• 狀態信息沒有狀態樣式
• 備注很長不適合展示在表格上
• 撤回申請這種負面操作放在中間不合理
• 全是重復的虛假信息，難以理解評判方案
• ……

這個方案既然是“拼”出來的，畫起來不費事，那么就必須通過其它方面來體現設計能力了，否則如何在海量作品集里脫穎而出呢？

接下來我就以這個方案為例，一步一步給大家演示一下改進方法。

目錄：

1. 信息調整
2. 順序調整
3. 內容填充
4. 樣式優化
5. 功能增加

1.信息調整

了解業務后發現，備注的字數普遍在幾十到上百字之間，也就是說用表格展示這么2小根本沒意義，還不如收起來點擊查看。

這樣操作就有點多了，可以去掉一個查看詳情，點擊整行查看即可。

進一步了解業務后發現，收件地址是對方公司，不會頻繁變動，所以也沒必要用兩行這么長。

并且收件人的變動頻率可能比收件地址高，那么可以兩個合并展示。

分析用戶場景發現，申請不會很頻繁，沒必要把時間也展示出來：

再仔細看一下操作，操作和申請狀態的對應關系不準確。已寄出后應該不能再撤回，而且應該支付完成后才會寄出。所以操作也要根據狀態進行調整。

最后金額加上逗號分隔符，訂單編號也改成一行，方案變成了這樣：

2.順序調整

仔細從用戶場景去看這些數據，會發現順序不合理。

首先，申請狀態的重要性應該很高，應該放到訂單編號右側。

金額和時間這種純數字的，一般右對齊，放在右側。

所以方案變成了這樣：

3.內容填充

想要把設計做好，一定要在真實內容的基礎上構思方案。

所以我們把重復的內容換成比較真實的：

是不是很快暴露出數字寬窄不齊的問題了？這個我們下面就解決。

4. 樣式優化

表格的數字編號這些，一定要確保字體寬度是一樣的，否則不方便對比查看。

例如原本用的蘋方字體，明顯參差不齊，改成思源黑體后就對齊了：

申請狀態只用純文字展示，肯定是不清晰的，加上表示樣式的圓點后好多了：

把收貨地址放到括號里，可以表意，但占地方而且不美觀，也可以改一下。

撤回這種負面操作，默認每行一個不太好看。改成懸停展示并標紅，看起來更整潔而且還增加了警示效果。

現在方案變成了這樣：

5.功能增加

申請狀態增加篩選功能，申請時間和金額增加排序功能，這些都放在表頭上不占地方：

然后訂單編號可能經常要復制，所以可以增加一個復制功能，懸停時展示：

現在方案改成了這樣：

對比一下

看看改完后有多大差異：

Before

After

不論改之前還是改之后，這個方案都是用 Ant Design “拼組件”完成的，然而效果就差別很大了。

前者好像拼完后沒多思考了，就純粹靠“組件”完成方案。

后者才是真正把組件當成工具，利用對業務和用戶場景的理解，來構思方案細節。

可見，組件雖然讓設計門檻下降了，但是對設計師的要求反而會上升。

當畫UI變得簡單，就說明在UX上卷的人變多了。

那么如何才能了解業務和用戶呢？了解業務可以靠多和同事溝通，了解用戶的話，最常用的方法就是問卷等各種調研手段了。

作者：設計師ZoeYZ

來源：體驗進階（ID：Advanced_UX）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。