編者按：自學(xué)設(shè)計(jì)時(shí)有哪些方法可以幫你飛速進(jìn)步？想學(xué)設(shè)計(jì)前應(yīng)該掌握哪些自學(xué)方法？本文總結(jié)了2個(gè)步驟，幫你快速成長。

這篇文章教你透過現(xiàn)象看本質(zhì)，把優(yōu)秀案例的底層邏輯摸清楚，拿來為自己所有！

文章分兩部分：

1. 如何收集交互案例
2. 如何理解設(shè)計(jì)中的“借鑒”——探尋設(shè)計(jì)本質(zhì)

一、交互案例收集 2 步走

為什么要收集交互案例呢？

你產(chǎn)出方案的上限不會(huì)超過你的眼界，就跟審美的道理一樣的，說俗氣點(diǎn)：沒見過好東西是設(shè)計(jì)不出好東西的。

所以交互案例的收集非常重要且十分必要。集案例的目的是為了能用得上，所以收集交互案例有兩個(gè)非常重要的動(dòng)作必須做：

（一）持續(xù)收集、定期整理

1. 持續(xù)收集

交互設(shè)計(jì)和視覺設(shè)計(jì)一樣，隨著時(shí)代的發(fā)展和用戶設(shè)備的更換，交互方式也會(huì)日新月異，舊的設(shè)計(jì)表達(dá)方式放在“當(dāng)下”不僅僅是過時(shí)，更可能會(huì)阻礙用戶對產(chǎn)品的理解和操作，所以需要我們持續(xù)收集。

收集交互素材有兩種方式：日常積累和主動(dòng)挖掘。

日常積累即平時(shí)玩手機(jī)或電腦的時(shí)候看到不錯(cuò)的設(shè)計(jì)就截圖保存，千萬不要只靠自己的大腦記憶，當(dāng)時(shí)你可能覺得自己記住了，但是第二天你就忘得一干二凈，比如你還記得你昨天吃了什么嗎？

主動(dòng)挖掘即拿出整塊時(shí)間專門來做案例的收集，我比較常用的網(wǎng)站是花瓣，直接搜索關(guān)鍵詞就能出來很多結(jié)果，適合精準(zhǔn)查找。

花瓣搜索

2. 定期整理

跟著我念：

素材不整理相當(dāng)于廢材！

素材不整理相當(dāng)于廢材！

素材不整理相當(dāng)于廢材！

收集固然重要，但是整理比收集更重要，這涉及到我們在后續(xù)工作中是否能快速匹配到合適的方案。

素材的整理我只分享一種方式，也是我從事設(shè)計(jì)工作以來一直在用的整理方式——打標(biāo)簽。

給每一張圖片打標(biāo)簽，大到信息架構(gòu)產(chǎn)品功能，小到按鈕狀態(tài)都打上標(biāo)簽，過程雖然繁瑣了點(diǎn)，但是等你做需求的時(shí)候就會(huì)發(fā)現(xiàn)這就是一個(gè)資源大寶庫，極大減少了你的調(diào)研時(shí)間，提升工作效率和方案質(zhì)量。

下面我從工具和打標(biāo)簽方法來展開講講。

用什么工具？

我推薦：eagle（ https://cn.eagle.cool/ ）

有多好用？我推薦給了我所有認(rèn)識的設(shè)計(jì)師，創(chuàng)始人很厲害，產(chǎn)品、設(shè)計(jì)、開發(fā)全能，真真是我的偶像~

軟件交互就不夸了，使用時(shí)極少遇到困擾我的點(diǎn)，感人肺腑的是，在這個(gè)啥啥軟件都要按年付費(fèi)的時(shí)代，eagle 收費(fèi)方式居然是買斷制！你敢信？學(xué)生還可以用教育優(yōu)惠還可以打 7 折，我都感動(dòng)哭了。

編者注：不想付費(fèi)的同學(xué)，也可以試試這款國產(chǎn)平替：

eagle 官網(wǎng)介紹圖

怎么用 eagle 整理圖片？

分類→打標(biāo)簽

我的建議是先給圖片按照端分個(gè)大類，例如 PC 軟件和移動(dòng)端軟件，然后再給圖片打上細(xì)分標(biāo)簽。具體打標(biāo)簽的方法我就不介紹了，太基礎(chǔ)了，我主要講講打標(biāo)簽的范圍。

標(biāo)簽怎么打才能盡可能把圖片中的交互設(shè)計(jì)案例給標(biāo)注出來呢？

兩個(gè)建議：顆粒度盡可能細(xì)、不用太規(guī)范

首先，顆粒度盡可能細(xì)

哪種顆粒度算細(xì)？

看看下圖，我有五百多個(gè)標(biāo)簽，只要是界面上有的，我基本上都打上標(biāo)簽。不要覺得麻煩，等你用的時(shí)候就知道有多好用。

其次，標(biāo)簽不用太規(guī)范。

導(dǎo)航欄、播放器、彈窗……這些標(biāo)簽是不是很規(guī)范？當(dāng)然了，你可以用這些規(guī)范的標(biāo)簽。

但是對于一些比較抽象的描述你也可以用不規(guī)范的標(biāo)簽，比如彈窗有出現(xiàn)在界面中間的彈窗，也有從頁面底部上滑而來的彈窗，那么針對從頁面底部上滑的彈窗，我就一律打上“上拉彈窗”的標(biāo)簽。

其實(shí)你會(huì)發(fā)現(xiàn)不規(guī)范的標(biāo)簽?zāi)惴炊褂玫酶啵瑸槭裁矗?/p>

因?yàn)椴灰?guī)范的標(biāo)簽更符合你的心智模型，當(dāng)你對界面中的一個(gè)元素打標(biāo)簽的時(shí)候，你的第一感覺就是你對這個(gè)元素的心智模型，比如上述案例中的上拉彈窗，我第一眼看到后，我最樸素的認(rèn)知就是這是一個(gè)上拉的彈窗，所以我就打一個(gè)“上拉彈窗”的標(biāo)簽，等我工作的時(shí)候需要調(diào)研上拉彈窗的時(shí)候，只需要搜索上拉就可以出現(xiàn)系列結(jié)果。

記住，一切工具都是服務(wù)于人的，只要能夠提高你的效率，野路子也不是不可以。

方法就介紹完了，其實(shí)方法很簡單，難的是日復(fù)一日的堅(jiān)持。

到現(xiàn)在為止我已經(jīng)收集了七千多張圖片，平均每張圖片打上三到四個(gè)標(biāo)簽，一段時(shí)間會(huì)花一些時(shí)間來清理時(shí)間久遠(yuǎn)的設(shè)計(jì)圖。

看到這里可能就會(huì)有人問了，收集這么多圖片可以幫助提升工作效率，是因?yàn)榭梢杂鞋F(xiàn)成的方案抄嗎？

關(guān)于這個(gè)問題，我也很想分享一些我的看法。

二、如何理解設(shè)計(jì)中的“借鑒”——探尋設(shè)計(jì)本質(zhì)

前段時(shí)間和一位剛畢業(yè)的交互設(shè)計(jì)師聊天，他說感覺設(shè)計(jì)好像就是你抄我我抄你，言語間對設(shè)計(jì)所做的事情頗有些失望。

我也和他說了說我的看法。

為什么會(huì)覺得設(shè)計(jì)就是抄，你抄我我抄你？

因?yàn)榇蟛糠秩酥豢吹搅耸虑榈谋硐螅绻粋€(gè)界面中你看到的只是按鈕的狀態(tài)變化，界面的跳轉(zhuǎn)，那你永遠(yuǎn)只能看到表象，拿到優(yōu)秀案例也只能照貓畫虎，久而久之，就容易產(chǎn)生搬運(yùn)工思維，覺得自己沒價(jià)值。

就像我們看待自己的工作一樣，雖然我經(jīng)常開玩笑說擺爛躺平，但是我內(nèi)心深處非常熱愛我的工作，注意是“我的”工作，“我的”工作不是公司的需求，而是我對一個(gè)設(shè)計(jì)方案的整體思考付出以及最后上線用戶使用，還有也是更重要的是我從設(shè)計(jì)中獲得的快樂，不要把快樂寄托在公司身上。

情緒這玩意永遠(yuǎn)向內(nèi)求，才不容易失望，如果看不到這一層，長此以往會(huì)比較痛苦。

底層邏輯是向外尋求資源，向內(nèi)尋求快樂。

分析交互設(shè)計(jì)案例也一樣，抓住優(yōu)秀案例背后的底層邏輯，學(xué)會(huì)了它的底層邏輯后，我們模仿的就是它的思路，解決問題的思路。

舉個(gè)例子。

比如知乎直播間的投票交互。

當(dāng)我們看到下圖的設(shè)計(jì)的時(shí)候，先用我們的主觀想法來分析一下，為什么要用小卡片來承載投票，又為什么要做折疊呢？

用小卡片承載投票，很明顯，優(yōu)勢在于面積小交互輕量，不會(huì)影響用戶觀看直播。

而把小卡片做折疊道理也是一樣的，投票后看到了結(jié)果，投票這一任務(wù)就已經(jīng)完成，對用戶而言就不那么重要了，折疊成更小的卡片既能保留投票查看入口，又能弱化投票的視覺存在減少對直播的干擾。

以上是表象，如何把底層邏輯提煉出來？

關(guān)注此交互方式解決了什么問題。

雖然我們不是內(nèi)部人員，無法結(jié)合實(shí)際業(yè)務(wù)分析，但是也能從界面中略知一二，就這“一二”也是有價(jià)值的。

我們看看這個(gè)卡片解決了什么問題呢？

兩個(gè)關(guān)鍵詞：輕量化、主次關(guān)系。

輕量化

除了小卡片，常規(guī)的彈窗也能承載投票，但是這些彈窗可就相對更笨重一些，對用戶的填寫壓力也會(huì)更大，那么可能就會(huì)降低用戶的填寫率。

主次關(guān)系

直播間最重要的是視頻內(nèi)容，能不遮擋就不遮擋，搞清楚主次關(guān)系了，設(shè)計(jì)方案就好辦了，只要滿足目的的設(shè)計(jì)方案都不會(huì)有太大問題。

看，從這個(gè)小卡片中提煉出來的不是卡片的折疊，而是輕量化和主次關(guān)系。

那我們怎么運(yùn)用呢？

舉個(gè)例子，現(xiàn)在有一個(gè)頁面需要加一個(gè)快捷提問功能，假如設(shè)計(jì)目標(biāo)是讓這個(gè)板塊在頁面比較輕量化地展示，并且在本頁面展示。目標(biāo)確定了，下面就根據(jù)目標(biāo)去匹配設(shè)計(jì)方案，現(xiàn)在就可以把知乎的卡片的輕量化處理方式拿來試試，使用浮層+折疊的方式來達(dá)到輕量化的目的。

最后還想談?wù)勎谊P(guān)于設(shè)計(jì)方案的看法，其實(shí)方案也就是所謂的答案有很多，但是精準(zhǔn)的問題卻不多，其實(shí)設(shè)計(jì)的關(guān)鍵點(diǎn)不在于找答案，而在于定位問題，只有問題定位準(zhǔn)了，答案也就是水到渠成的事情。

以上。

歡迎關(guān)注作者的微信公眾號：餿面包