《界面設(shè)計(jì)模式》讀書(shū)筆記

模式意味著重用箫措,這是《界面設(shè)計(jì)模式》想要傳達(dá)給我們讀者的思想核心寂曹。所以整本書(shū)收集了很多常用的界面設(shè)計(jì)模式哎迄,如何組織內(nèi)容,如何設(shè)計(jì)導(dǎo)航稀颁,如何組織頁(yè)面等等芬失,以供我們?cè)诶碚摰幕A(chǔ)上學(xué)習(xí)各種模式。雖然日常設(shè)計(jì)的工作中匾灶,我們能遇到很多模式,但是我只是孤立的看各個(gè)模塊租漂,而此書(shū)卻將各種情景下的模式進(jìn)行了梳理阶女,提供了各種解決方案。所以當(dāng)我重新審視之前遇到的設(shè)計(jì)工作哩治,才意識(shí)到界面設(shè)計(jì)模式是如此有據(jù)可循的秃踩。

但是作為翻譯后的中文版,有些內(nèi)容讀起來(lái)還是有些費(fèi)勁业筏,有些翻譯并沒(méi)有能夠結(jié)合中文的語(yǔ)言習(xí)慣憔杨。例如第八章的輸入提示(Input Hints)和輸入提醒(Input Prompt),在中文的語(yǔ)言環(huán)境下真的很難區(qū)分字面意思蒜胖,就算有文字和圖例消别,我還是混淆了抛蚤。

但在設(shè)計(jì)工作中如果遇到難題,書(shū)中的界面設(shè)計(jì)模式一定會(huì)是我參考和進(jìn)一步挖掘的依據(jù)寻狂。

第一章 ?用戶(hù)做些什么

本章分享了一個(gè)重要的觀點(diǎn)“好的界面設(shè)計(jì)并非始于圖片岁经,而是始于對(duì)人的理解”。所以本章的模式都是基于需求層面的場(chǎng)景下的行為模式蛇券,關(guān)注點(diǎn)始終立足于人缀壤,羅列了14種行為模式幫助我們?yōu)橛脩?hù)爭(zhēng)取更多的利益。

第二章 ?組織內(nèi)容:信息架構(gòu)和應(yīng)用結(jié)構(gòu)

本章從頁(yè)面的角度纠亚,將用戶(hù)使用頁(yè)面分為幾件事:顯示單個(gè)對(duì)象塘慕;顯示一個(gè)列表;提供工具來(lái)創(chuàng)建對(duì)象蒂胞;協(xié)助單個(gè)任務(wù)完成图呢。進(jìn)而細(xì)分出10種模式:主題搜索和瀏覽、新聞流啤誊、圖片管理器岳瞭、信息板、畫(huà)布加調(diào)色板工具條蚊锹、向?qū)ぁ⒃O(shè)置編輯器、可選視圖牡昆、多工作空間姚炕、多級(jí)幫助。

第三章 ?到處走走:導(dǎo)航丢烘、路標(biāo)和找路

根據(jù)不同頁(yè)面或空間的連接關(guān)系柱宦,本章分享了13種導(dǎo)航模型:清楚的入口點(diǎn)、菜單頁(yè)面播瞳、金字塔掸刊、模態(tài)面板、深度鏈接狀態(tài)赢乓、逃生艙忧侧、胖菜單、頁(yè)腳站點(diǎn)地圖牌芋、登錄工具蚓炬、序列地圖、面包屑層級(jí)結(jié)構(gòu)躺屁、注釋滾動(dòng)條肯夏、動(dòng)畫(huà)轉(zhuǎn)換。


第四章 ?組織頁(yè)面:頁(yè)面元素的布局

本章先討論頁(yè)面布局的幾個(gè)主要方面:視覺(jué)層次、視覺(jué)流以及怎樣使用動(dòng)態(tài)顯示技術(shù)驯击,介紹了四個(gè)重要的格式塔原則烁兰。隨后分享了13種頁(yè)面布局模式:視覺(jué)框架、中央舞臺(tái)余耽、對(duì)等網(wǎng)格彬坏、帶標(biāo)題的區(qū)域收叶、模態(tài)Tab翩蘸、手風(fēng)琴悼院、可收起面板、可移動(dòng)的面板袱耽、右/左對(duì)齊杀餐、對(duì)角線平衡、響應(yīng)式展開(kāi)朱巨、響應(yīng)式允許史翘、流體布局。


第五章 列表

本章先分析了列表的使用場(chǎng)景冀续,然后討論了列表的結(jié)構(gòu)琼讽,最后根據(jù)需求給出了一些解決方案。而這些解決方案最后呈現(xiàn)為12種列表模式:雙面板選擇器洪唐、單窗口深入钻蹬、列表嵌入、縮略圖網(wǎng)格凭需、傳送帶问欠、斑馬行、分頁(yè)粒蜈、條目跳轉(zhuǎn)顺献、字母表滾動(dòng)條、級(jí)聯(lián)列表枯怖、樹(shù)表注整、新列表行。

第六章 ?完成任務(wù):動(dòng)作與命令

本章專(zhuān)注于界面上的“動(dòng)詞”度硝,列出了一些常規(guī)的動(dòng)作表現(xiàn)形式设捐,以及一些創(chuàng)新型的擴(kuò)展邊界。最后分享了11種動(dòng)作模型:按鈕組塘淑、懸浮工具、動(dòng)作面板蚂斤、突出“完成”按鈕存捺、智能菜單項(xiàng)、預(yù)覽、進(jìn)度提示捌治、可取消性岗钩、多級(jí)撤銷(xiāo)、命令歷史肖油、宏兼吓。


第七章 ?顯示復(fù)雜數(shù)據(jù):樹(shù)、表格及其他信息圖形

本章先介紹了信息圖形的基礎(chǔ)森枪,就是帶著給用戶(hù)傳遞數(shù)據(jù)的目標(biāo)视搏,對(duì)數(shù)據(jù)進(jìn)行可視化展示。最后分享了11種顯示復(fù)雜數(shù)據(jù)的模式:總攬加細(xì)節(jié)县袱、數(shù)據(jù)提示浑娜、數(shù)據(jù)焦點(diǎn)、動(dòng)態(tài)查詢(xún)式散、數(shù)據(jù)刷筋遭、局部縮放、可排序表格暴拄、徑向表漓滔、多Y值圖、多個(gè)小對(duì)象乖篷、樹(shù)狀地圖响驴。其中大多數(shù)模式都是針對(duì)怎樣和數(shù)據(jù)進(jìn)行交互的,所以關(guān)于數(shù)據(jù)可視化的原理那伐、呈現(xiàn)和選擇更推薦《數(shù)據(jù)可視化》這本書(shū)踏施。


第八章 ?獲取用戶(hù)輸入:表單和控件

本章先介紹了表單設(shè)計(jì)的基礎(chǔ),都是圍繞用戶(hù)進(jìn)行的罕邀,隨后對(duì)于控件進(jìn)行了詳盡的分類(lèi)和介紹畅形。最后介紹了控件的11種模式:容錯(cuò)格式、結(jié)構(gòu)化的格式诉探、填空日熬、輸入提示、輸入提醒肾胯、密碼強(qiáng)度計(jì)竖席、自動(dòng)完成、下拉選擇器敬肚、列表構(gòu)造器毕荐、良好的默認(rèn)值、同頁(yè)錯(cuò)誤信息艳馒。這一章給我們團(tuán)隊(duì)內(nèi)部自己制定組件化管理提供了很多理論和實(shí)踐基礎(chǔ)憎亚,雖然是通用化控件员寇,但是表單中的控件不應(yīng)該是生硬冰冷的,它同樣也應(yīng)該有對(duì)于用戶(hù)的理解以及表現(xiàn)出最大的善意第美。

第九章 ?利用社交媒體

本章先討論了建立一些策略來(lái)使用社交媒體時(shí)蝶锋,應(yīng)該考慮的原則和模式,隨后分享了12種社交內(nèi)容制作的模式:編輯混合什往、個(gè)人聲音扳缕、轉(zhuǎn)帖和評(píng)論、發(fā)起會(huì)話别威、倒置納米金字塔躯舔、擇時(shí)策略、專(zhuān)用流兔港、社交鏈接庸毫、共享組件、新聞框衫樊、內(nèi)容列表區(qū)域飒赃、新近談話。


第十章 ?邁向移動(dòng)設(shè)計(jì)

本章首先討論了移動(dòng)設(shè)計(jì)的一些挑戰(zhàn)科侈,然后分析了如何進(jìn)行移動(dòng)界面設(shè)計(jì)载佳,最后分享了11種移動(dòng)端設(shè)計(jì)模式:縱向堆疊、膠片臀栈、觸摸工具蔫慧、底部導(dǎo)航、小圖片加文字的列表权薯、無(wú)限列表姑躲、寬邊界、文本清除按鈕盟蚣、加載提示黍析、應(yīng)用互聯(lián)、精簡(jiǎn)品牌形象屎开。移動(dòng)設(shè)計(jì)這幾年發(fā)展非常迅猛阐枣,所以這里分享的模式都是非常基礎(chǔ)的奄抽,針對(duì)于現(xiàn)階段的移動(dòng)設(shè)計(jì)模式蔼两,相信有更多可以擴(kuò)充的點(diǎn)。

第十一章 ?修飾外觀:視覺(jué)風(fēng)格和美感

“漂亮的細(xì)節(jié)并不一定會(huì)影響人們?cè)谶@所房子里完成任務(wù)的效率逞度。但是它確實(shí)會(huì)影響人們的心情额划,進(jìn)而影響到其他行為—例如,他們會(huì)在這里逗留和探索多長(zhǎng)時(shí)間档泽、是否選擇再次回來(lái)訪問(wèn)锁孟,以及是否會(huì)推薦給別人彬祖,等等∑烦椋”對(duì)本章的此段文字非常認(rèn)同,這也就是我們一直在做產(chǎn)品設(shè)計(jì)時(shí)強(qiáng)調(diào)品牌基調(diào)和美觀的重要性甜熔。不可否認(rèn)可用性和易用性是基礎(chǔ)圆恤,但美觀性是最能將產(chǎn)品的情緒傳達(dá)給用戶(hù)的。本章分享了7種修飾外觀的模式:深色背景腔稀、少一點(diǎn)顏色多一些價(jià)值盆昙、角落處理、邊界回應(yīng)字體焊虏、發(fā)絲淡喜、粗細(xì)字體對(duì)比、皮膚和主題诵闭。

基于對(duì)《界面設(shè)計(jì)模式》這本書(shū)的理解炼团,我相信在日常的工作和學(xué)習(xí)中可以沿襲這本書(shū)的思路,不斷擴(kuò)充和迭代更多的設(shè)計(jì)模式疏尿。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瘟芝,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子褥琐,更是在濱河造成了極大的恐慌锌俱,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件敌呈,死亡現(xiàn)場(chǎng)離奇詭異贸宏,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)磕洪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)吭练,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人褐鸥,你說(shuō)我怎么就攤上這事线脚。” “怎么了叫榕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵浑侥,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我晰绎,道長(zhǎng)寓落,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任荞下,我火速辦了婚禮伶选,結(jié)果婚禮上史飞,老公的妹妹穿的比我還像新娘。我一直安慰自己仰税,他們只是感情好构资,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著陨簇,像睡著了一般吐绵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上河绽,一...
    開(kāi)封第一講書(shū)人閱讀 51,624評(píng)論 1 305
  • 那天己单,我揣著相機(jī)與錄音,去河邊找鬼耙饰。 笑死纹笼,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的苟跪。 我是一名探鬼主播廷痘,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼削咆!你這毒婦竟也來(lái)了牍疏?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拨齐,失蹤者是張志新(化名)和其女友劉穎鳞陨,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體瞻惋,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡厦滤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了歼狼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掏导。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖羽峰,靈堂內(nèi)的尸體忽然破棺而出趟咆,到底是詐尸還是另有隱情,我是刑警寧澤梅屉,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布值纱,位于F島的核電站,受9級(jí)特大地震影響坯汤,放射性物質(zhì)發(fā)生泄漏虐唠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一惰聂、第九天 我趴在偏房一處隱蔽的房頂上張望疆偿。 院中可真熱鬧咱筛,春花似錦、人聲如沸杆故。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)反番。三九已至沙热,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間罢缸,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工投队, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枫疆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓敷鸦,卻偏偏與公主長(zhǎng)得像息楔,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子扒披,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

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