Chapter 17 整合視覺設計

此文僅為《About Face 4:交互設計精髓》的讀書筆記彤蔽,有學習需要請支持正版梢褐。

視覺藝術與視覺設計

當代藝術家的首要關切是表達自我屁桑,而視覺設計師的重點則是清晰溝通医寿。

視覺界面設計元素

雕琢視覺界面時,請謹記以下要素:

情景蘑斧,情景靖秩,情景 Context

每一份視覺設計指南都要考慮其使用情景。

形狀

如果你的目的是抓住用戶的注意力竖瘾,形狀并不是形成對比的最佳屬性沟突。

大小

較大的物品吸引的注意力更多;大小還是有序和量化的變量捕传。

顏色
  1. 色值 value
  2. 色調(diào) hue
  3. 飽和度 saturation
  4. HSV結(jié)合
方向

當傳達方向信息時惠拭,可以使用的變量。

紋理 Texture

屏幕上的元素沒有真正的紋理庸论,但可以有紋理的外觀职辅。紋理需要大注意力來分辨;但可以提供能供性affordance信號葡公。目前流行的扁平化設計導致使用紋理或擬物化逐漸減少罐农,但即使在高度極簡的設計中,恰當?shù)厥褂蒙倭考y理也能夠大量改善用戶界面的易學性催什。

位置

位置是有序和量化的變量涵亏,有利于傳達層級消息;空間關系還可以反過來暗指概念關系蒲凶。

文字與版面

必須在界面閱讀文字時气筋,應采用以下指南:

  • 使用高對比度文字
  • 選擇恰當?shù)淖煮w和大小
  • 簡潔地組織文字
信息層級 Information hierarchy

使用視覺屬性的差異來給界面分層。對于暫時式應用旋圆,信息層級應該非常明顯宠默,在特定布局中,不同“級別”的重要性形成鮮明對比灵巧。

動作及其隨時間的變化 Motion and change over time

掌握組件如何最時間變化搀矫,對視覺界面設計師很重要。

視覺界面設計原則

  • 傳達風格/傳播品牌 Convey a tone/communicate the brand

  • 帶領用戶厘清視覺層級

  • 在組織的每一層提供視覺結(jié)構(gòu)和流

    1. 對齊到網(wǎng)格
    2. 創(chuàng)建邏輯路徑
    3. 界面元素平衡
  • 在特定屏幕上告訴用戶能做什么

    1. 使用圖表
    2. 傳達功能感
    3. 將視覺符號與對象關聯(lián)起來
    4. 簡單地渲染圖標和視覺符號
    5. 盡可能預覽視覺效果
  • 響應命令
    四種情況:立刻變化刻肄;超過十分之一秒瓤球,需提供細微的視覺線索,告訴用戶已經(jīng)收到命令敏弃;達到十秒卦羡,提供某些線索,告訴用戶正在進行;超過十秒绿饵,最好顯示提示欠肾,解釋延遲的原因。

  • 把注意力吸引到重要事情上

  • 最小化視覺工作量
    在視覺上過分裝飾拟赊、混亂或者擁擠的屏幕都會加重用戶的認知負荷刺桃。

  • 保持簡單

設計原則
刪減東西,直到破壞了設計為止要门,再最后把去掉的東西加上虏肾。

視覺信息設計的原則

  • 加強視覺對比
  • 顯示因果關系
  • 顯示多個變量
  • 在一個界面中整合文本、圖形及數(shù)據(jù)
  • 確保內(nèi)容的質(zhì)量欢搜、相關性和完整性
  • 在相鄰空間上顯示事物封豪,而不是按時間堆積 Show things adjacent in space, not stacked in time
  • 可量化的數(shù)據(jù)就要量化

一致性和標準化

界面標準化的益處

單一界面標準能夠通過提高產(chǎn)出和減少錯誤,改善用戶學習界面的能力和生產(chǎn)率炒瘟;
有利于軟件開發(fā)商吹埠。

界面標準化的風險

任何標準的主要風險在于根據(jù)標準創(chuàng)建的產(chǎn)品不可能比標準更好。

標準疮装、指南和經(jīng)驗法則

界面標準最適合作為具體的指導準則和經(jīng)驗法則缘琅,僵化地遵循界面指導準則或不考慮具體情境中的用戶需求,會強迫應用程序界面使用不恰當?shù)慕换ツP汀?/p>

什么時候打破規(guī)則

設計原則
遵守標準廓推,除非有極好的其他選擇

應用程序之間的一致性和標準

一致性并不意味著僵化刷袍,特別在一致性不恰當時。指導你的是規(guī)則的精神實質(zhì)樊展,不是規(guī)則本身呻纹。

設計語言

視覺界面設計師最重要的工具之一是“設計語言”思想;設計語言往往通過標準和風格指南傳達专缠,編寫風格指南有助于設計師合理和簡化設計語言雷酪,但二者并不是同義詞。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末涝婉,一起剝皮案震驚了整個濱河市哥力,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌墩弯,老刑警劉巖吩跋,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異渔工,居然都是意外死亡锌钮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門涨缚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轧粟,“玉大人,你說我怎么就攤上這事脓魏±家鳎” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵茂翔,是天一觀的道長混蔼。 經(jīng)常有香客問我,道長珊燎,這世上最難降的妖魔是什么惭嚣? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮悔政,結(jié)果婚禮上晚吞,老公的妹妹穿的比我還像新娘。我一直安慰自己谋国,他們只是感情好槽地,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著芦瘾,像睡著了一般捌蚊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上近弟,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天缅糟,我揣著相機與錄音,去河邊找鬼祷愉。 笑死窗宦,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的谣辞。 我是一名探鬼主播迫摔,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼泥从!你這毒婦竟也來了句占?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤躯嫉,失蹤者是張志新(化名)和其女友劉穎纱烘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體祈餐,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡擂啥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了帆阳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哺壶。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出山宾,到底是詐尸還是另有隱情至扰,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布资锰,位于F島的核電站敢课,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏绷杜。R本人自食惡果不足惜直秆,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鞭盟。 院中可真熱鬧圾结,春花似錦、人聲如沸齿诉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鹃两。三九已至遗座,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間俊扳,已是汗流浹背途蒋。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留馋记,地道東北人号坡。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像梯醒,于是被迫代替她去往敵國和親宽堆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

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