第2講移動設計第二

1、UI設計Mobile User InterfaceDesign（主講：袁旭）基礎篇：UI設計中的視覺設計（上）本講內(nèi)容摘要2嶺南師范學院視覺藝術與視覺設計UI設計中必不可缺的視覺設計設計不是藝術嶺南師范學院視覺設計是UI設計中必不可缺的4 As an interaction designer, you put a lot of effort intounderstanding your products users. 作為一名交互設計師，我們?yōu)榱丝梢哉嬲私獾挠脩舳冻隽撕芏嗯?。嶺南師范學院視覺設計是UI設計中必不可缺的5 You also spend time crafting the i

2、nterfaces behaviors and the presentation of the content that helps users achieve their goals. 同時，我們（交互設計師）花費了大量的精力來構建產(chǎn) 品界面的交互行為及內(nèi)容的呈現(xiàn)方式，從而可以幫助用戶實現(xiàn)他們的目標。嶺南師范學院視覺設計是UI設計中必不可缺的6 However, these efforts will fall short unless you also dedicate significant work to clearly communicating to your users both

3、what content is available and how they can interact with it. 然而我們的這些努力如果不能夠向用戶清晰地傳達哪些 內(nèi)容是可用的以及哪些是可以與之交互的話，一切都是徒然的。嶺南師范學院視覺設計是UI設計中必不可缺的7 With interactive products this communication almostalways happens visually, via a display. 用戶與交互式間的交互幾乎都是通過某種顯示設備以視覺的方式進行的，因而視覺設計在整個交互設計中必不可缺。的嶺南師范學院視覺藝術與視覺設計8設計跟藝

4、術是事嗎？嶺南師范學院視覺藝術與視覺設計9 Practitioners of fine art and practitioners of visual design share a visual medium. However, while both must be skilled in and knowledgeable about that medium, their work servesdifferent ends. 雖然美工與視覺設計師都是在倒騰視覺，并且都需要具備一定的藝術設計功底，但是二者工作的目的不同。嶺南師范學院視覺藝術是的藝術10 Art is a means of sel

5、f-expression on topics of emotional or intellectual concern to the artist and, sometimes, to society at large. 藝術在某種意義上是一種完全的自我情感或者對藝術家和的表達。嶺南師范學院視覺藝術是的藝術11 Few constraints are imposed on the artist, and the more singular and unique the product of the artists exertions, the more highly it is valued.

6、 藝術家在進行創(chuàng)作時，沒有過多的限制，而是充分的自我發(fā)揮，并且越是獨一無二的，越有價值。嶺南師范學院視覺設計是為他人而做的設計12 Visual designers, on the other hand, typically aim to create artifacts with specific utility for the people who use them, and are concerned with clearcommunication. 與藝術家不同的是，視覺設計師關心的是如何讓與用戶進行清晰的實現(xiàn)用戶目標的，因而常常非常努力地創(chuàng)作出能夠。嶺南師范學院視覺設計是為他人而做的

7、設計13視覺設計視覺藝術嶺南師范學院視覺設計是為他人而做的設計14 “Visual design is concerned with finding the representation best suited to the communication of some specific information.”Designing Visual Interfaces (Prentice Hall, 1994) 對于視覺設計而言，它所關心的是尋找到最佳的可以用于傳遞某個特定信息的呈現(xiàn)方式。嶺南師范學院目標導向設計中的視覺設計15 In keeping with a Goal-Directed a

8、pproach, visual designers should endeavor to present behavior and information in such a way that it is understandableand useful, supporting the organizations brandingobjectives as well as theas goals. 在目標導向設計中，視覺設計師需要在保證易于理解和使用的同時，實現(xiàn)企業(yè)的品牌目標及用戶的目標。嶺南師范學院UI視覺設計中的基本元素UI視覺設計中的十大基本元素嶺南師范學院UI視覺設計中的基本元素17

9、At its root, visual interface design is concerned withthe treatment and arrangement of visual elements to communicate behavior and information. 歸根結底，視覺界面設計關注的是用于傳遞與信息的視覺元素的處置方式與排列方式。的行為嶺南師范學院UI視覺設計中的基本元素18 Every element in a visual composition has a number ofproperties, such as shape and color, that

10、 work together to create meaning. 在視覺中的每一個元素都擁有若干種屬性，例如形狀與顏色，這些屬性一道傳達出了某種含義。嶺南師范學院UI視覺設計中的基本元素19 The ways in which these properties are applied to each element (and how they change over time and with interaction) allow users to make sense of content and the graphical interface. 這些視覺屬性應用于每一個元素的方式（以及它

11、們隨著時間和交互的改變方式）內(nèi)容。用戶弄清楚的界面及嶺南師范學院UI視覺設計基本元素Context20 Every single visual design guideline is subject to thecontext in which it is used. 每一條視覺設計的準則都受到戶是在陽光燦爛的戶外邊走邊看使用環(huán)境的影響，用呢，還是在昏暗的屋子里找尋著屏幕上細小的數(shù)字呢？嶺南師范學院UI視覺設計基本元素Context21 Similar to conveying the brand, the context of use mustbe taken as part of the

12、givens that constrain the visual design. 與傳遞企業(yè)品牌價值一樣，的使用環(huán)境同樣必須作為進行視覺設計時必須考慮的重要因一。嶺南師范學院UI視覺設計基本元素Shape22 Is it round, square, or amoeba-like? Shape is the primary way we recognize what an object is and we tend to recognize objects by their outlines. 它是圓形的，方形的還是變形蟲狀的？形狀是我們識別 某個物體是什么的最主要的途徑，并且我們傾向于通過物

13、體的輪廓來辨別它們。嶺南師范學院UI視覺設計基本元素Shape23 However, distinguishing among different shapes takes a higher level of attention than distinguishing some other properties, such as color or size. 然而對于我們來說辨別不同的形狀相比于顏色和大小來說，需要較次的注意。嶺南師范學院UI視覺設計基本元素Shape24 This means its not the best property to contrast whenyour pur

14、pose is to capture the users attention. 所以當我們需要吸戶的注意力時，恐怕僅僅依靠不同的“形狀”是沒法實現(xiàn)這樣的目的的。嶺南師范學院UI視覺設計基本元素Shape25This means its not the best property to contrast when your purpose is to capture the users attention.所以當我們需要吸戶的注意力時， 恐怕僅僅依靠不同 的“形狀”是沒法 實現(xiàn)這樣的目的的。嶺南師范學院UI視覺設計基本元素Size26 How big or small is it in rela

15、tion to other items on the screen? 相比于屏幕上的其它對象來說，是大一點還是小一點呢？嶺南師范學院UI視覺設計基本元素Size27 Larger items draw our attention more, particularlywhen theyre much larger than similar things aroundthem. 較大的對象能夠吸引我們的注意力，尤其是當它們比周圍類似的對象要大得多的時候。嶺南師范學院UI視覺設計基本元素Size28Larger items draw our attention more, particularly

16、when theyre much larger than similar things around them.較大的對象能夠吸引我們的注意力，尤其是當它們比周圍類似的對象要大得多的時候。嶺南師范學院UI視覺設計基本元素Size29 Size is also an ordered and quantitative variable, which means that people automatically sequence objects in terms of their size and tend to assign relative quantities to those differ

17、ences. 大小還是一個具備順序關系及數(shù)量關系的屬性，意味著 人們會自動地按照大小關系將物體排序并依照差異的多少劃定不同的重要程度。嶺南師范學院UI視覺設計基本元素Size30UI視覺設計基本元素Size is also an ordered and quantitative variableLarger items draw our attention more嶺南師范學院嶺南師范學院UI視覺設計基本元素Size31 Be aware that size is a dissociative property, which means that when something is very

18、small or very large, it can be difficult to decipher other variables, such asshape. 千萬要注意，大小是一個容易“精神”的屬性，意味著當某個物體太小或者太大時，便很難去辨識出諸如形狀這樣的其他的屬性。嶺南師范學院UI視覺設計基本元素Size32猜猜我是什么？嶺南師范學院UI視覺設計基本元素Color33 Though most people speak of color loosely, designers must be very precise and deliberate when considering

19、colors in an interface. 盡管大多數(shù)人在談及顏色時都不甚精確，但是對于設計 師來說在考慮界面中使用的顏色時必須非常精確且經(jīng)過深思熟慮。嶺南師范學院UI視覺設計基本元素Color34 Any choices should first take into account the usersgoals, environment, the content, and the brand. 任何顏色上的選擇都必須首先綜合考慮用戶的目標、環(huán)境、內(nèi)容及品牌這些因素。嶺南師范學院UI視覺設計基本元素Color35 After that, its most useful to think o

20、f interface color interms of value(brightness), hue, and saturation. 在考慮過用戶的目標等因后，通常從“明暗”、“色調(diào)”及“飽和度”的角度去考慮界面上使用的顏色。嶺南師范學院UI視覺設計基本元素Color(V)36 How light or dark is it? The idea of lightness or darkness is meaningful primarily in the context of an object compared to the background. 有多亮或者有多暗？明暗與否通常需要與背

21、景相比較才有意義。嶺南師范學院UI視覺設計基本元素Color(V)37 Like size, value can be dissociative. If a photo is toodark or too light, for example, you can no longer perceive other details about it. 與大小一樣，明暗也是精神造成其他細節(jié)的丟失。的。太亮或者太暗都會嶺南師范學院UI視覺設計基本元素Color(V)38太亮太暗嶺南師范學院UI視覺設計基本元素Color(V)39 People perceive contrasts in value qu

22、ickly and easily, so value can be a good tool for drawing attention to elements that need to stand out. 人們可以很容易而快速地覺察到明暗上的對比，因而對于界面上需要突出顯示的元素來說可以應用明暗對比。嶺南師范學院取消關閉UI視覺設計基本元素Color(H)40 Is it yellow, red, or orange? Great differences in hue draw our attention quickly, but users often have multilayered

23、associations with hue. 是黃色、紅色或是橙色的？色調(diào)上的巨大差異很容易吸 引我們的注意力，但是要注意不同的用戶也許對于顏色有著不同的認知。嶺南師范學院UI視覺設計基本元素Color(H)41 Unlike size or value, though, hue is not intrinsically ordered or quantitative, so its less ideal for conveying that sort of data. 與大小及明暗不同，色調(diào)不具備順序上的或者是數(shù)量上的特性，因而不太適合用于承載此類的信息。嶺南師范學院UI視覺設計基本元素Co

24、lor(H)42 To create an effective visual system that allows usersto keep track of implied meanings, you should use a limited number of hues. 為了保證可以創(chuàng)建出一個能夠用戶及時了解顏色所承載的含義的高效的視覺系統(tǒng)，對于視覺設計師而言，應該使用少量的色調(diào)。嶺南師范學院UI視覺設計基本元素Color(H)43界面毫無章法嶺南師范學院UI視覺設計基本元素Color(H)44 Hue is also where an interfaces branding andco

25、mmunication needs can collide; it can take a talented visual designer to navigate these waters. 色調(diào)同時也是界面的品牌策略和與用戶的需求產(chǎn)生的地方，這時候需要一位資深的視覺設計師參與進來。嶺南師范學院UI視覺設計基本元素Color(H)45淘寶網(wǎng)（桌面端）淘寶網(wǎng)（端）嶺南師范學院UI視覺設計基本元素Color(S)46 Saturation draws attention similar to the way that hue and value do when there is a strong

26、contrast at play. 色調(diào)是否如春季的花朵般，又或者如灰色的石頭般？當界面上存在注意力。飽和度對比時，同樣可以吸戶的嶺南師范學院UI視覺設計基本元素Color(S)47Saturation draws attention similar to the way that hue and value do when there is a strong contrast at play.色調(diào)是否如春季的花朵般，又或者如灰色的石頭般？當界面上存在飽和度對比時，同樣可以吸引用戶的注意力。嶺南師范學院UI視覺設計基本元素 Color(HSV)48 Hue, saturation, and v

27、alue are three variables thattogether can describe any color in an interface, in amsensibly named HSV. 色調(diào)、飽和度和明度可以界面上的任何一種色了HSV（HSB）色彩模型彩，它們共同嶺南師范學院UI視覺設計基本元素 Orientation49 Is it pointing up, down, or sideways? This is a useful variable to employ when you have directional information to convey (up o

28、r down, backward or forward). 是指向上的、下的還是側(cè)面的？當我們需要在界面上承 載上、下、后退及前進之類的信息時，方向是一個很有用的變量。嶺南師范學院UI視覺設計基本元素 Orientation50的漲跌嶺南師范學院UI視覺設計基本元素Texture51 Is it rough or smooth, regular or uneven? Of course, elements on a screen dont have real texture, but they can have the appearance of it. 是粗糙的，還是平滑的，是規(guī)則的，還是不

29、規(guī)則的？雖 然界面元素并非具有真的材質(zhì)，但是它們卻可以看起來具備某種材質(zhì)。嶺南師范學院UI視覺設計基本元素Texture52 Texture is seldom useful for conveying differences or calling attention, since it requires a lot of attention to distinguish. 材質(zhì)難以承載差異或者吸引注意力，因為不管何種材質(zhì)都需要用戶投入大量的精力來區(qū)分。嶺南師范學院UI視覺設計基本元素Texture53 Texture also takes a fair number of pixels an

30、d higher color resolutions to convey. 材質(zhì)還需要借助大量的像素（較高的分辨率）和更高的色彩分辨率才能夠體現(xiàn)出來。嶺南師范學院UI視覺設計基本元素Texture54 However, it can be an important affordance cue; ridges or bumps on a user interface (UI) element generally indicate that its draggable. 但是材質(zhì)可以作為一個非常重要的提示某種功能的線索；界面上的凸起的元素暗示它是可以拖動的。嶺南師范學院UI視覺設計基本元素Tex

31、ture55 Even in a highly minimalist design, a small amount oftexture applied appropriately can greatly improve the learnability of a user interface. 時行的扁平設計風造成了界面元素材質(zhì)的使用，但是縱使在一個極簡的設計中，少量的正確使用材質(zhì)可以極大地提高用戶界面的易學性。嶺南師范學院UI視覺設計基本元素Position56 Where is it relative to other elements? Like size, position is bo

32、th an ordered and quantitative variable, which means its useful for convey information about hierarchy. 相對于其他界面元素的處在什么樣的位置？與大小一樣，位置同樣也是一個能夠承載順序關系和數(shù)量關系的變量。嶺南師范學院UI視覺設計基本元素Position57 We can leverage a screens reading order to locateelements sequentially. 我們可以根據(jù)用戶的閱讀習慣來不同的元素，例如將最重要的或者是最先使用到的元素放在左上角。嶺南師

33、范學院UI視覺設計基本元素Position58 Spatial relationships can in turn be used to allude to conceptual relationships: Items that are grouped together on the screen are interpreted to be similar. 空間上的關系可以反過來體現(xiàn)出認知上的關系：在界面上被放置在相同組中的對象會被認為是相似的對象。嶺南師范學院UI視覺設計基本元素Position59相似元素靠得近嶺南師范學院UI視覺設計基本元素Position60 The use of

34、spatial positioning to express logical relationships can be further enhanced with motion. 配合適當?shù)膭赢嬓Ч梢愿玫伢w現(xiàn)邏輯上的關系。嶺南師范學院UI視覺設計基本元素Position61The use of spatial positioning to express logical relationships can be further enhanced with motion.配合適當?shù)膭赢嬓Ч梢愿玫伢w現(xiàn)邏輯上的關系。嶺南師范學院UI視覺設計基本元素Text and Typography62

35、Text is a critical component of almost all user interfaces. Written language can convey dense and nuanced information, but you must be careful to usetext appropriately. 文本是所有的用戶界面上最重要的組成元可以傳遞大量而細致的信息，但是必須非常一。文字地使用。嶺南師范學院UI視覺設計基本元素Text and Typography63 People recognize words primarily by their shapes

36、. The more distinct the shape, the easier the word is to recognize. 人們主要依據(jù)文字的形狀來區(qū)分不同的字詞。形狀越清晰，文字越容易辨識。嶺南師范學院UI視覺設計基本元素Text and Typography64 Interfaces should try to minimize the amount of text that must be read in order to use it successfully. 用戶界面不同于閱讀書籍，因而應當盡可能少地使用文字從而保證用戶可以地使用。用視覺來告訴是什么，用文字來告訴是哪一

37、個設計原則嶺南師范學院UI視覺設計基本元素Text and Typography65Use high-contrast text 要確保文字與背景對比鮮明，且盡量少用補色。Choose an appropriate typeface and size 挑選合適的字體與字號，10號是保證可讀性的最小字號。Phrase your text succinctly 仔細斟酌界面上使用的文字，確保言簡意賅。嶺南師范學院UI視覺設計基本元素 Information Hierarchy66 When users are presented with a visual interface, they go t

38、hrough an unconscious process of evaluating the most important object or information there, and what the relationships are between it and the other visible content and controls. 當用戶看到某個用戶界面時，他們會下意識地去分析界面上的對象或者信息的重要性以及它們彼此間的關系。嶺南師范學院UI視覺設計基本元素 Information Hierarchy67 To make this decoding process as

39、quick and easy as possible for users, visual designers create an information hierarchy, using differences in visual attributes to stratify the interface. 為了讓用戶的這一下意識的分析行為更加快速和容易地 完成，視覺設計師通過使用不同的視覺屬性來構建出信息的層次。嶺南師范學院UI視覺設計基本元素 Information Hierarchy68明顯的信息層次細微的信息層次嶺南師范學院UI視覺設計基本元素Motion69 Any of the el

40、ements mentioned in this section can change over time to convey information, relationship between parts, command attention, ease transitions between modes, and confirm the effects of commands. UI視覺設計中的這些基本元素都可以隨著時間改變，用 于承載信息以及元素間的關系、喚起用戶的注意、平滑不同模式間的切換以及確認操作等等。嶺南師范學院UI視覺設計基本元素Motion70嶺南師范學院UI視覺設計基本元素

41、Motion71嶺南師范學院UI視覺設計原則UI視覺設計中的九大原則嶺南師范學院UI視覺設計原則 The human brain is a powerful pattern-recognition computer, making sense of the dense quantities of visual information that bombard us every everywhere we look. 人類的大腦如同一臺強大的模式識別計算機，從看到的大量視覺信息中找尋出其中的含義。嶺南師范學院UI視覺設計原則 Our brains manage the overwhelming

42、amount of data flowing into our eyes by discerning visual patterns and establishing priorities to the things we see. 我們的大腦高效地處理著印入我們眼簾的海量信息，辨識出各種視覺模式并對我們所見的事物建立優(yōu)先級。嶺南師范學院UI視覺設計原則 Pattern recognition is what allows us toprocess visual information so quickly. 模式識別息。我們快速地處理各種視覺信嶺南師范學院UI視覺設計原則Pattern re

43、cognition is what allows us to process visual information so quickly.模式識別我們快速地處理各種視覺信息。嶺南師范學院UI視覺設計原則 To most effectively convey the behavior of an application to users, visual interface designers should be taking advantage of users innate visual processingability. 為了可以高效地向用戶傳達的各種行為，視覺界面設計師們必須學會充分地利

44、用人們的這種與生俱來的能力。嶺南師范學院UI視覺設計原則Provide visual structure and flow at each level of organizationConvey a tone / communicate the brandLead users through the visual hierarchySignal what users can do on a given screenRespond to commands嶺南師范學院UI視覺設計原則嶺南師范學院原則3：在各個層次上提供良好的視覺層次和視覺流80Its useful to think of user

45、 interfaces as being composed of visual and behavioral elements, which are used in groups, which are then grouped into panes, which then may, in turn, be grouped into screens, views, or pages.用戶界面由若干個視覺元素和行為元素，它們編成組，放入面板中，這些面板最終再放入屏幕、視圖或者頁面中。嶺南師范學院對齊到網(wǎng)格（Align to a grid）81 Aligning visual elements is one of the key ways that designers can help users experience a product in an organized, systematic way. 對齊界面上的視覺元素是設計師用來幫助用戶