【update】被小夥伴指出根本就一張圖都沒有正常顯示,真是給知乎跪了。。。我辛苦做的gif圖呀。已更新

** 好久沒有上知乎了,新年忙著憋了幾個大招,不知道之前邀請Hololens設計師Amit來跟我們聊mixed reality的公開課大家有沒有來捏?之後我們還會邀請更多業界真正的大神們來跟大家做分享,秉持著免費公開的原則,給大家帶來更多的乾貨。

**另外今天上了看到了很多私信,不好意思很久沒上有些資訊沒法一一回復了。想要聯絡我的小夥伴可以發郵件到spellyu@uxoffer。com,隨時聊起來。

下面進入正題,這篇文章首發在了UXOFFER的公眾號上,最近有點小反思所以做了一些更新,跟大家分享幾個你必須知道的神器。

第一類:設計的快

前兩天UXOFFER的幾個小夥伴在矽谷線下參加了一個Hackthon活動,好好的爽了一把的同時,回來就問了我們:為什麼其他設計師手下功夫都那麼快?一天就能出一整套設計方案呢。

對於設計師來說,我們每天的工作在理想情況下,大概80%是創意性工作而20%都是簡單重複性勞動。那麼怎麼保證我們的設計不那麼簡單重複呢? - 當然要好好的藉助外在資源。下面是三個讓你爽到不行的

No 1. Vecteezy - 可以編輯的素材大全

要想手快,純靠自己一點一點的做素材肯定不行;都是一堆PSD檔案一個圖層一個圖層摳肯定也不行。尤其是出初稿的時候,往往只是傳達一個產品概念供內部討論,那麼這時候所有的asset都自己一筆一筆的畫顯然有點划不來。

Vecteezy是各種向量圖的集合站,雖然有些資源要付費,但是免費資源就已經非常給力了,你們感受一下:

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

很多資源都提供eps模式,可以直接匯入sketch呀Figma呀等快手神器,快速生成你想要的介面。在面對必須快速搞定的初稿的時候,Vecteezy絕對會讓你如有神助。不過使用了Vecteezy上的資源,

一定要記得新增你的引用哦

No 2. ColorClaim - 讓你選顏色不再糾結

Tobias是我去年粉上的大神,他把自己從2012年做過的產品的上百種配色方案總結到了一起,起名叫ColorClaim。個人認為比colourlover等各大色盤分享網站都靠譜,畢竟是大神開過光的,基本都是拿來既用的。自從有了ColorClaim,我就告別了顏色選擇疑難症。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

No 3. 讓最終稿不再單調- GraphicBurger

就連我們公司的PM們,都學會了給CEO或者其他團隊作報告的時候,把線框圖放到一個macbook或者iphone裡面,感覺視覺效果瞬間高大上了許多。試問你在做作品集做演示做報告的時候,難道還沒有開始使用這一招?那你就out啦。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

GraphicBurger上提供各種PSD資源,剛才說的各種好看的裝置容器(比如下圖)只是其中的一小部分。仔細挖掘你會看到很多讓你激動不已的好資源的。

不過再次嘮叨下,

可要記得給原作者credit呀。

第二類:設計的周到

剛才說我們設計師,每天大概80%創意性工作而20%是簡單重複性工作,那麼從另一個角度來說,設計師其實做的也是一個充滿細節的工作。比如今天選用了2017流行色美美的翠綠當做背景,明天就被老闆批評沒有考慮到accessibility完全不考慮紅綠不分的小夥伴崩潰的內心。如何讓設計面面俱到?下面是幾個法寶:

No. 4 流程輔助神器 - UX Project Checklist

UX Project Checklist是一個完善的關於UX你需要完成的各個步驟的checklist,雖然不是每一步都是必須的,但是能夠幫助你更有流程化,不忘記設計步驟中的小細節。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

No.5 做一個對對比度敏感的設計師 - WebAIM Contrast Checker

Accessibility這個概念越炒越熱。對於我們做互動的小夥伴,在沒吃過accessibility的虧的時候,基本大家都是怎麼美怎麼來,可是一旦產品真的被一部分使用者所不能使用的時候,你一定會意識到作為設計師你身上的重擔的。比如我有一個設計師朋友,在產品上線之後,客服接到了不計其數的紅綠視覺障礙的使用者打來的電話,說根本看不清按鈕的狀態,產品團隊不得不幾天的時間從重新設計到釋出新版本,忙了個底朝天。

其實很多時候,最淺層次的accessibility不足,都是

對比度不足

搞的鬼。下圖中的字也許你都看得清,但是對於很多視覺上略有障礙的使用者來說,前兩行都是不合格的對比度呢。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

Image credit: Jvisockyogrady/

那麼具體檢視對比度的工具,我最愛用的是WebAIM自帶的對比度查詢器,只需要貼入顏色的Hex碼就會給你答案。下圖是第二行第一個Type和背景色的對比度測試結果,可憐的對比度只有

1.14:1

,怪不得使用者看不清呢。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

No. 6 和程式設計師無縫溝通的sketch外掛 - Marketch

當在GitHub發現這個神器,緊接著又發現了其中的中文,我的內心是激動不已的。中國人做出的良心好外掛,如果五星是滿分我真的好想打七星啊。如果你用過Zepline或是Markman或是InVision Inspect,那麼你對Marketch的創意一定不陌生。想想在這些工具誕生之前,每週花費在給程式設計師哥哥們出spec上的時間,真是不能更推薦這個外掛。生成的spec是HTML格式的,點選一個設計元件就會顯示這個元件的詳細設計資訊,不信請看下圖:

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

第三類:設計的自信

User Centered Design這個概念可以說一直支撐著我們應該怎樣做使用者體驗。從使用者出發的設計,理論上來說應該能讓我們的得到更自信的設計結果,但是也免不了經常會被產品經理或者其他設計師質疑我們的設計決策的時候。如何設計的更自信?下面是幾個好工具:

No 7. 啟發性法則一網打盡 - UX Check

不知道小夥伴們做設計師的時候會不會有一步去評估下自己的設計有沒有符合Neilsen老爺子的十大啟發性原則。(什麼你並沒有聽說過啟發性原則?請留言給我,我將負責派出跟Neilsen老爺子並肩作戰的的大神助理一枚給你劃重點)

每一次做heuristic review的時候,其實很難善始又善終,因為十條大法則加設計上幾十上百個元素,做到一半就餓了是難免的(並不是吃貨)。那麼UX Check就是為了解決這個問題的,直接內嵌在瀏覽器裡面,讓你像批改作業一樣對自己的設計元素進行評測,是不是棒棒噠?

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

點到哪裡就review哪裡

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

所有review直接生成列表並有圖片

No 8. 各種快速使用者體驗測試 - Usability Hub

糾結症的設計瑡們,是不是有時候難免選擇疑難?或是聚在一起就討論起來了:你說我這個按鈕都做這麼大了,為什麼使用者就不知道點呢?

其實在產品釋出之前,我們除了做複雜的使用者測試,很多其他的小測試也輔助我們做好涉及決策。比如你現在設計瞭如下兩種圖示,想要知道哪個使用者更喜歡,你只需要三分鐘就可以在Usability Hub搭建好你的測試。

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

而使用者將會看到以下介面進行測試:

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

當收集一段時間的使用者反饋之後,你就可以用資料來做最終的設計決策了。是不是很贊?

推薦給互動設計師們的幾個神器

推薦給互動設計師們的幾個神器

最後,第九個超讚資源,當然是我們UXOFFER的公眾號了(捂臉奔走)。我們這一群在矽谷的設計瑡致力於給大家傳遞最新最前沿的設計知識,分享設計資源。最近將會請到另一位美國本土的設計大咖,跟大家做分享,敬請繼續關注。

你喜歡用的好工具有哪些?歡迎一起交流。

** 封面Image credit:EVAN BROWN