設計之同理心

我們都知道碉怔,做產(chǎn)品烘贴,做設計時,要從用戶的角度出發(fā)撮胧,要符合用戶的心智模型。

知易行難老翘。特別是當需要打破自己原有的認知芹啥。


不妨先看看這下面兩張截圖,試著理解下想要展示或者表達的信息铺峭。



圖1




圖2


不知道您看下來的感受是什么墓怀?

我在看到第一張截圖對應的頁面時,非常困惑卫键,無法理解這是在表達什么傀履,盡管我此前大概知道這個頁面大概是要干什么。 在看第二張圖對應的頁面莉炉,表格所表達的意思十分清晰明了钓账,也能明白其背后的邏輯。

事實上絮宁,圖1是模(chao)仿(xi)圖二梆暮。卻因為只模仿了表面,沒有得到真髓绍昂。

因為缺乏設計方面的經(jīng)驗啦粹,花了一點時間才悟出來這兩個看似十分類似的設計的區(qū)別。

通過圖1要想理解到圖2所表達的信息窘游,要跨越重重認知上面的障礙唠椭。

1. ?圖1中,需要將頂部的六顆星星和極低風險忍饰,同下面圖表中的贪嫂,“六星”關聯(lián)起來,從而才能明白六星是指代極低風險喘批;

圖2則直接將星星和文字(極低風險)都展示在同一表格中撩荣,視覺上一目了然,完全沒有這重障礙饶深;

2. 圖1中餐曹,在圖表中,只有綠色代表推薦的色塊敌厘,上面有文字注明“推薦”台猴,其他的黃色和藍色的色塊,卻沒有文字標示。

所以饱狂,用戶需要先將黃色跟“不推薦”等同于起來曹步,將“藍色”跟“適當”推薦起來,才能在看圖表時休讳,理解到下面各個色塊所表達的意思讲婚。或者重現(xiàn)回過頭去看這個藍色到底代表什么顏色俊柔。

圖2中筹麸,每一個色塊都注明了文字,完全不需要預先建立這種聯(lián)系此時雏婶。

文字是直接釋義物赶,而顏色則是象征意義。因為此處的顏色和文字沒有直接的關系留晚,(如紅色通常表示禁止或者危險)酵紫,文字更高效和直接。

雖然错维,這對于對顏色敏感奖地,比如說有設計背景的人來說,可能建立起這種聯(lián)系沒有這么困難需五。

而對于普通的用戶鹉动,在短時間內(nèi),將顏色同所對應的意義立起來宏邮,真的太困難了泽示,對用戶的期望太高了。(當然蜜氨,如果借用了日常生活中所熟悉的模型械筛,如交通燈和Mac OX中的紅黃綠按鈕 ,則是另外一回事飒炎。)

圖1是已離職的另外一位產(chǎn)品經(jīng)理設計的頁面埋哟。她是從UI轉(zhuǎn)崗為產(chǎn)品,再加上她對這個頁面要表達的意思已經(jīng)很熟悉郎汪,所以可能她理解起來不會這么困難赤赊。

事實上,她非常習慣用顏色來表達意義煞赢。

之前我們要將大家手上各自負責的需求狀態(tài)匯總到我這里抛计,然后我就收到了如下面截圖所示的花花綠綠的一份郵件。







我收到這封郵件后照筑, 簡直崩潰了吹截, 得花多長時間才能從五顏六色中把各事項當前的狀態(tài)整理出來瘦陈。其實每個人的如何管理是個人工作習慣,但得要考慮郵件接收方啊波俄。(唉晨逝,插一句,花花綠綠五顏六色懦铺,是郵件大忌傲计础)码秉。

就如同纵竖,做設計時偎谁,要從接收頁面所要傳達的信息用戶的角度考慮盆佣。

但最大的困難可能在于系冗,她并沒有意識到這是她自己獨有的習慣和能力岖研。這也算是經(jīng)驗和過去显押,反而是一種限制吧浸踩。

吐槽完了叔汁,明天要去埋上面的坑,把頁面優(yōu)化掉检碗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末据块,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子折剃,更是在濱河造成了極大的恐慌另假,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怕犁,死亡現(xiàn)場離奇詭異边篮,居然都是意外死亡,警方通過查閱死者的電腦和手機奏甫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門戈轿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人阵子,你說我怎么就攤上這事思杯。” “怎么了挠进?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵色乾,是天一觀的道長。 經(jīng)常有香客問我领突,道長暖璧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任攘须,我火速辦了婚禮漆撞,結(jié)果婚禮上殴泰,老公的妹妹穿的比我還像新娘。我一直安慰自己浮驳,他們只是感情好悍汛,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著至会,像睡著了一般离咐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奉件,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天宵蛀,我揣著相機與錄音,去河邊找鬼县貌。 笑死术陶,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的煤痕。 我是一名探鬼主播梧宫,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摆碉!你這毒婦竟也來了塘匣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤巷帝,失蹤者是張志新(化名)和其女友劉穎忌卤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體楞泼,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡驰徊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了现拒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辣垒。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖印蔬,靈堂內(nèi)的尸體忽然破棺而出勋桶,到底是詐尸還是另有隱情,我是刑警寧澤侥猬,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布例驹,位于F島的核電站,受9級特大地震影響退唠,放射性物質(zhì)發(fā)生泄漏鹃锈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一瞧预、第九天 我趴在偏房一處隱蔽的房頂上張望屎债。 院中可真熱鬧仅政,春花似錦、人聲如沸盆驹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躯喇。三九已至辫封,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間廉丽,已是汗流浹背倦微。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留正压,地道東北人欣福。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像焦履,于是被迫代替她去往敵國和親劣欢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評論 25 707
  • 1 UI設計基礎 1.1 為iOS而設計 1.1.1 iOS包含以下3條設計原則: 遵從裁良,UI應該有助于人們理解內(nèi)...
    Willry閱讀 3,554評論 1 48
  • iOS 9設計規(guī)范 中文版 完整版譯者注:本文譯自蘋果官方人機界面指南 iOS Human Interface G...
    海寧Hennie閱讀 13,263評論 2 60
  • 1)用來:做好分類,節(jié)省空間校套,等需要的時候更容易找到价脾! 2)形式:固定、滑動 谷歌規(guī)范中規(guī)定:一組固定 tabs ...
    拾葉姑娘閱讀 461評論 0 0
  • 近年來鞋服行業(yè)競爭呈現(xiàn)白熱化狀態(tài)笛匙,無論是線下實體店和賣場還是各大鞋服侨把、美妝等時尚品牌電商的角力都日益激烈。時尚跨界...
    活動家閱讀 133評論 0 0