編者按:自學設計時有哪些方法可以幫你飛速進步?想學設計前應該掌握哪些自學方法?本文總結了2個步驟,幫你快速成長。
這篇文章教你透過現象看本質,把優秀案例的底層邏輯摸清楚,拿來為自己所有!
文章分兩部分:
- 如何收集交互案例
- 如何理解設計中的“借鑒”——探尋設計本質
為什么要收集交互案例呢?
你產出方案的上限不會超過你的眼界,就跟審美的道理一樣的,說俗氣點:沒見過好東西是設計不出好東西的。
所以交互案例的收集非常重要且十分必要。集案例的目的是為了能用得上,所以收集交互案例有兩個非常重要的動作必須做:
(一)持續收集、定期整理
1. 持續收集
交互設計和視覺設計一樣,隨著時代的發展和用戶設備的更換,交互方式也會日新月異,舊的設計表達方式放在“當下”不僅僅是過時,更可能會阻礙用戶對產品的理解和操作,所以需要我們持續收集。
收集交互素材有兩種方式:日常積累和主動挖掘。
日常積累即平時玩手機或電腦的時候看到不錯的設計就截圖保存,千萬不要只靠自己的大腦記憶,當時你可能覺得自己記住了,但是第二天你就忘得一干二凈,比如你還記得你昨天吃了什么嗎?
主動挖掘即拿出整塊時間專門來做案例的收集,我比較常用的網站是花瓣,直接搜索關鍵詞就能出來很多結果,適合精準查找。
花瓣搜索
2. 定期整理
跟著我念:
素材不整理相當于廢材!
素材不整理相當于廢材!
素材不整理相當于廢材!
收集固然重要,但是整理比收集更重要,這涉及到我們在后續工作中是否能快速匹配到合適的方案。
素材的整理我只分享一種方式,也是我從事設計工作以來一直在用的整理方式——打標簽。
給每一張圖片打標簽,大到信息架構產品功能,小到按鈕狀態都打上標簽,過程雖然繁瑣了點,但是等你做需求的時候就會發現這就是一個資源大寶庫,極大減少了你的調研時間,提升工作效率和方案質量。
下面我從工具和打標簽方法來展開講講。
用什么工具?
我推薦:eagle( https://cn.eagle.cool/ )
有多好用?我推薦給了我所有認識的設計師,創始人很厲害,產品、設計、開發全能,真真是我的偶像~
軟件交互就不夸了,使用時極少遇到困擾我的點,感人肺腑的是,在這個啥啥軟件都要按年付費的時代,eagle 收費方式居然是買斷制!你敢信?學生還可以用教育優惠還可以打 7 折,我都感動哭了。
編者注:不想付費的同學,也可以試試這款國產平替:
eagle 官網介紹圖
怎么用 eagle 整理圖片?
分類→打標簽
我的建議是先給圖片按照端分個大類,例如 PC 軟件和移動端軟件,然后再給圖片打上細分標簽。具體打標簽的方法我就不介紹了,太基礎了,我主要講講打標簽的范圍。
標簽怎么打才能盡可能把圖片中的交互設計案例給標注出來呢?
兩個建議:顆粒度盡可能細、不用太規范
首先,顆粒度盡可能細
哪種顆粒度算細?
看看下圖,我有五百多個標簽,只要是界面上有的,我基本上都打上標簽。不要覺得麻煩,等你用的時候就知道有多好用。
其次,標簽不用太規范。
導航欄、播放器、彈窗……這些標簽是不是很規范?當然了,你可以用這些規范的標簽。
但是對于一些比較抽象的描述你也可以用不規范的標簽,比如彈窗有出現在界面中間的彈窗,也有從頁面底部上滑而來的彈窗,那么針對從頁面底部上滑的彈窗,我就一律打上“上拉彈窗”的標簽。
其實你會發現不規范的標簽你反而使用得更多,為什么?
因為不規范的標簽更符合你的心智模型,當你對界面中的一個元素打標簽的時候,你的第一感覺就是你對這個元素的心智模型,比如上述案例中的上拉彈窗,我第一眼看到后,我最樸素的認知就是這是一個上拉的彈窗,所以我就打一個“上拉彈窗”的標簽,等我工作的時候需要調研上拉彈窗的時候,只需要搜索上拉就可以出現系列結果。
記住,一切工具都是服務于人的,只要能夠提高你的效率,野路子也不是不可以。
方法就介紹完了,其實方法很簡單,難的是日復一日的堅持。
到現在為止我已經收集了七千多張圖片,平均每張圖片打上三到四個標簽,一段時間會花一些時間來清理時間久遠的設計圖。
看到這里可能就會有人問了,收集這么多圖片可以幫助提升工作效率,是因為可以有現成的方案抄嗎?
關于這個問題,我也很想分享一些我的看法。
前段時間和一位剛畢業的交互設計師聊天,他說感覺設計好像就是你抄我我抄你,言語間對設計所做的事情頗有些失望。
我也和他說了說我的看法。
為什么會覺得設計就是抄,你抄我我抄你?
因為大部分人只看到了事情的表象,如果一個界面中你看到的只是按鈕的狀態變化,界面的跳轉,那你永遠只能看到表象,拿到優秀案例也只能照貓畫虎,久而久之,就容易產生搬運工思維,覺得自己沒價值。
就像我們看待自己的工作一樣,雖然我經常開玩笑說擺爛躺平,但是我內心深處非常熱愛我的工作,注意是“我的”工作,“我的”工作不是公司的需求,而是我對一個設計方案的整體思考付出以及最后上線用戶使用,還有也是更重要的是我從設計中獲得的快樂,不要把快樂寄托在公司身上。
情緒這玩意永遠向內求,才不容易失望,如果看不到這一層,長此以往會比較痛苦。
底層邏輯是向外尋求資源,向內尋求快樂。
分析交互設計案例也一樣,抓住優秀案例背后的底層邏輯,學會了它的底層邏輯后,我們模仿的就是它的思路,解決問題的思路。
舉個例子。
比如知乎直播間的投票交互。
當我們看到下圖的設計的時候,先用我們的主觀想法來分析一下,為什么要用小卡片來承載投票,又為什么要做折疊呢?
用小卡片承載投票,很明顯,優勢在于面積小交互輕量,不會影響用戶觀看直播。
而把小卡片做折疊道理也是一樣的,投票后看到了結果,投票這一任務就已經完成,對用戶而言就不那么重要了,折疊成更小的卡片既能保留投票查看入口,又能弱化投票的視覺存在減少對直播的干擾。
以上是表象,如何把底層邏輯提煉出來?
關注此交互方式解決了什么問題。
雖然我們不是內部人員,無法結合實際業務分析,但是也能從界面中略知一二,就這“一二”也是有價值的。
我們看看這個卡片解決了什么問題呢?
兩個關鍵詞:輕量化、主次關系。
輕量化
除了小卡片,常規的彈窗也能承載投票,但是這些彈窗可就相對更笨重一些,對用戶的填寫壓力也會更大,那么可能就會降低用戶的填寫率。
主次關系
直播間最重要的是視頻內容,能不遮擋就不遮擋,搞清楚主次關系了,設計方案就好辦了,只要滿足目的的設計方案都不會有太大問題。
看,從這個小卡片中提煉出來的不是卡片的折疊,而是輕量化和主次關系。
那我們怎么運用呢?
舉個例子,現在有一個頁面需要加一個快捷提問功能,假如設計目標是讓這個板塊在頁面比較輕量化地展示,并且在本頁面展示。目標確定了,下面就根據目標去匹配設計方案,現在就可以把知乎的卡片的輕量化處理方式拿來試試,使用浮層+折疊的方式來達到輕量化的目的。
最后還想談談我關于設計方案的看法,其實方案也就是所謂的答案有很多,但是精準的問題卻不多,其實設計的關鍵點不在于找答案,而在于定位問題,只有問題定位準了,答案也就是水到渠成的事情。
以上。
歡迎關注作者的微信公眾號:餿面包
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 4 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓