数字媒体设计何大龙.ppt
课程：数字媒体设计老师：李双,学生：何大龙学号：111727008,Shou ji jie mian de shi jue biao da,手机界面的视觉表达,目 录,第一章 手机界面的概述 1.1 手机界面的含义 1.2 手机界面的发展简述 第二章 手机界面的风格 2.1 手机界面的主要组成部分 2.2 不同国家手机界面的风格及视觉表达 第三章 手机硬件界面的视觉表达 3.1 手机硬件界面包括哪些 3.2 手机硬件界面额度造型表达 3.3 手机硬件界面的色彩表达 3.4 手机硬件界面的材质表达,学生：何大龙学号：111727008,1,数字媒体设计,目 录,第四章 手机软件界面的视觉表达 4.1 什么是手机的软界面（定义）4.2 手机软件界面包括哪些 4.3 手机软件界面的色彩及文字的视觉表达 4.4 手机图符、图标的对比手机图符的基本参数手机图标的标准化 4.5 不同手机动态导航的视觉表达 4.6 不同手机板式结构风格的视觉表达 第五章 手机界面统一化视觉表达 5.1 手机界面板式结构的的统一手机排布方式 5.2 手机硬件界面和软件 界面视觉风格的统一性 第六章 总结,学生：何大龙学号：111727008,2,数字媒体设计,第一章 手机界面的概述,1.1手机界面的含义 在人与机器互动过程中，有一个层面，即对我们所说的界面。是人与机器间传递、交换信息的媒介。手机界面有狭义和广义的说法，狭义的主要是指：人通过手与手机发生关系“作用面”手机显示屏的任何信息的变化都会反馈给用户，而人则通过手机给予的信息做出反应，完成人机交互以实现人向机的信息传递。而广义来就是手机本身就是一种界面并通过这个界面使我们接触和享受到无话的高科技的交流方式说简单来说，手机界面就是通过手机的硬件界面（手机的外形、色彩、材质等）和手机的软件界面（手机显示屏内的图 标、色彩、版面等）传递给人 的心理、视觉、触觉等感受。,学生：何大龙学号：111727008,3,数字媒体设计,第一章 手机界面的概述,学生：何大龙学号：111727008,4,硬件界面,软件界面,软件界面,数字媒体设计,第一章 手机界面的概述,1.2手机界面的发展简介（1997年-1999年）手机界面的功能大于审美 这一时期，由于手机硬件技术的限制，手机的显示屏也仅仅只是一两个简单图形界面，黑白两色构成。（2000年-2001年）在功能完善的基础上，人们对手机界面的视觉审美有了一定要求 随着手机市场竞争的白热化，人们开始对界面的视觉审美上有了一定的要求于是彩屏、双应运而生。（2002年-至今）功能和审美 整合 由于全球化信息网络的 发展迅速，手机界面的设计日 益成熟，功能和审美密切整 合。,学生：何大龙学号：111727008,5,数字媒体设计,第一章 手机界面的概述,学生：何大龙学号：111727008,6,（1997年-1999年）,（2000年-2001年）,（2002年-至今）,A,B,C,A,B,C,数字媒体设计,第二章 手机界面的风格,2.1 手机界面的主要组成部分 手机界面的主要主要组成部分就是硬件手机界面和软件手机界面组成。,学生：何大龙学号：111727008,7,示意图,数字媒体设计,第二章 手机界面的风格,2.2 不同国家手机界面的风格及视觉表达（以日韩、欧美的手机界面风格为例）日韩手机界面设计很注重信息的传递，借以优质的画面简洁大方，却不乏精细的设计。而手机界面也并不是一味的简洁，多元化发展是符合不同的人群定位需求。尤其是日本，他得PDC手机大部分都有两套界面图形，一套是平面化处理，另一套则是3D立体效果。,学生：何大龙学号：111727008,8,日本手机界面,数字媒体设计,第二章 手机界面的风格,就单个图标的设计上和韩国都达到了相当高的一个设计水准，但是日本手机界面在组合和整体布局上，更重视视觉流程的通畅性和信息传达的无误性，而且日本的手机界面让人感受更多的是新意，在视觉冲击上，日本比较注重装饰，不仅拥有诸多三维立体图标，还应用的可爱的手机界面来丰富用户的视觉体验。,学生：何大龙学号：111727008,9,日本手机界面,数字媒体设计,第二章 手机界面的风格,而欧美的手机界面在研发的过程中比较注重人性化的一种设计理念，把“人”的因素始终贯穿在整个界面设计的过程中，充分的考虑到手机界面与整个既定主题风格的统一性。而且欧美的手机界面设计严谨规整，而且延续性很强。,学生：何大龙学号：111727008,10,Iphone手机界面,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,11,3.1 手机硬件界面包括(1)手机按键的图形、大小、排列、位置、弹性等。(2)标识上的数字、文字、符号等，其中包括字体及其大小、位置。(3)发音孔和散热器的形状、大小、位置等。(4)各种端口的位置、间距等。(5)显示屏的形状、大小、位置、角度、亮度等。(6)品牌标识及一些辅助性造型设计。,手机硬件界面示意图,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,12,3.2 手机硬件界面的造型表达 手机形态是吸引消费者注意力的第一要素，它能够激起消费者心理上的购买欲望，同时也是手机功能、配置以及品质等因素的外在表现。,平板、旋转、滑盖、复合式造型手机,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,13,3.3 手机硬件界面的色彩表达 色彩是产品视觉设计的第一要素，好的产品色彩设计不但能够吸引消费者的目光，而且在展现产品设计艺术的同时，将设计师的情感通过色彩更有效的传达给消费者。增强消费者对产品乃至产品品牌的深刻印象。而手机界面的配色应该基于产品色彩的功能，兼顾“突出”和“融合”两个方面，既突出提升的方面又融合平稳的方面。对于手机色彩搭配问题，一方面依靠设计师对色彩的感觉，一个优秀设计师能够熟练驾驭色彩的应用，调配出赏心悦目的色彩组合；另一方面，通过色彩使用几率的统计。我们可 能了解到目前在手机的色彩组合 上的一些普遍规律。,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,14,通常在手机上作为“绿叶”来陪衬的色彩主要是银色，其次是黑色，这两种颜色和其他色彩容易协调，因 而设计师在进行配色时较为偏好。在对主色的选择上，蓝 色、银色、黑色为第一军 团；白色、灰色为第二选择；浅蓝色、的比重以往有较大提升。,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,15,不同色系的手机,数字媒体设计,第三章 手机硬件界面的视觉表达,学生：何大龙学号：111727008,16,3.4 手机硬件界面的材质表达 手机的形态设计刺激了用户的视觉，那么手机的材质则给消费者 视、触两方面的感知体验。传统的金属材质给人以冷峻、伶俐的感觉，充满现代感；塑料会给人轻便、连接、时尚感。还有铝合金、镁合金、不锈钢等，这些新型材料相结合经过不同的加工工艺带给用户更加丰富多彩的视觉风格体验。,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,17,4.1 什么是手机软件界面 手机显示屏反馈的信息所依赖并以之为存在形式就是手机的软界面。4.2 手机软界面包括 手机软界面主要包括：手机显示屏、二级界面、手机色彩、字体、手机图标、手机动态导航、手机版式等等。,手机软界面基本形式,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,18,4.3 手机软件界面的色彩及文字的视觉表达 软件界面的总体色彩应该与系统界面的总体色调相协调。如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，如大红、大黄色彩的强烈变化会影响用户的使用情绪，给用户产生不舒服的感觉，那么第一感觉不好的东西用户就会直接从心里作了放弃处理。而软件界面中的字体也是影响手机界面的重要视觉元素之一。在设计过程中，字体标准的选择依据操作系统类型决定，必须使用与其软件界面视觉风格统一标准的字体、大小、文字的色彩也必须与软件界面的整体色彩风格保持一致。使消费 者对系统界面的肯定和喜爱有效 地转移到产品上来，以赢得喜 爱其用户的市场占有量。,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,19,手机软件界面的色彩与文字表达（一）,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,20,手机软件界面的色彩与文字表达（二）,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,21,4.4 手机图符的对比 手机图符是手机界面的图形图标符号，是具有明确指代含义的计算机图形。在手机软件界面中图符指的是图标及其功能标识，是手机软件界面中重要的视觉元素，直接关系用户手机界面的识别和操作。,手机图符的对比（诺基亚、iphone）,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,22,4.4.1 手机手机图标的基本参数 手机图标的格式支持位图和矢量图两种格式，其中支持位图格式分为透明和不透明两种，透明的格式包括：ico、png，不透明包括：jpg、jif（动态非动态）、mjpg。矢量图格式为：svg 因为手机图标的格式比较多，所以手机图标的大小要求没有软件图标那样严格，一般常用的大小尺 寸为：10 x10、14x14、32x32、64x64、128x128。,手机图标格式,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,23,4.4.2 手机手机图标的标准化 手机软件界面的技术层日趋成熟，为了更好的交互性，导航系统从静态走向动态。让用户能够对不同的模块的操作迅速掌握，在不同功能模块的相同操作区域的静、动态元素风格一致性，使整个软件在一个特有的整体风格之中。（1）图标的可识别性（2）图标的格式与手机显示屏的相适应性（3）图标的大小与显示屏分辨率的相关性（4）图标色彩和整体色彩的搭配,手机图标的标准化,数字媒体设计,第四章 手机软件界面的视觉表达,学生：何大龙学号：111727008,24,电脑显示的标准图标,数字媒体设计,第四面章 手机软件界面的视觉表达,学生：何大龙学号：111727008,25,4.4 不同手机动态导航的视觉表达 手机软件界面的技术层日趋成熟，为了更好的交互性，导航系统从静态走向动态。,数字媒体设计,动态导航,第五章 手机界面的统一化视觉表达,学生：何大龙学号：111727008,26,5.1 手机界面板式结构的的统一 在满足软件功能的情况下，合理的安排版式结构，以达到美观、适用相统一的目的。5.1.1 手机排布方式 手机的排布方式主要分为四种：（1）列表式摆布方式 列表式的排布方式，顾名思义就是将选项如列表一般 的排布，一般是从上而下的排布，而每一项一般采用文 字和图形相结合的方式。这种方式的优点就是清晰明了。,数字媒体设计,第五章 手机界面的统一化视觉表达,学生：何大龙学号：111727008,27,（2）宫格式摆布方式 宫格式的排布是非常常见的排布方式，主要有九宫格式的、十二宫格的，甚至现在多宫格式的。主要是按照宫格的形式，将手机的功能图标和文字以矩阵的形式排布，不仅节省了空间，而且最快、最便捷的将图标的功能传递给用户。,数字媒体设计,第五章 手机界面的统一化视觉表达,学生：何大龙学号：111727008,28,（3）弓形列表式摆布方式 弓形列表方式在手机界面中是比较少用到的，它在软件界面以及网页中有较多的运用。它的特点就是在侧栏设置功能图标，被选择的功能图标会以某种形式进行反馈。（4）圆盘导航式摆布方式 圆盘导航式就是将功能图标以环形的方式排布，这种方式也增加了用户的使用趣味性。,数字媒体设计,第五章 手机界面的统一化视觉表达,学生：何大龙学号：111727008,29,5.2 手机硬件界面和软件界面视觉风格的统一性 手机的系统界面是根据产品的目标用户的审美习惯来制定。并且坚持形式和功能的统一，也就是手机 硬件界面和软件界面的风格的统一。,数字媒体设计,LGGD580,第六章 总结（一）,学生：何大龙学号：111727008,30,随着3G时代的到来，手机界面设计在技术层面已经日益成熟，手机的功能也愈之强大，基于手机系统的相关软件也应运而生，手机设计的人性化不在仅仅局限于手机硬件的外观，手机的软件系统逐渐成为用户直接操作和应用的主体，它应以美观实用、操作便捷、独特为重点。越来越多的手 机界面 设计者也更加关注其设计的风格与品位。主题风格 鲜明的 手机受用户的青睐，也是消费者产生购买欲望的 主要因素，因此手机的风格化设计也扮演着重要的角色。Ihopne手机市场的“奇迹”也有力地验证了这一点。而且随着科技的不断发展，各个国家 和地区也都不断地去拓展、研发自 身风格的手机，并形成自己的特 有的手机界面风格。性,数字媒体设计,第六章 总结（二）,学生：何大龙学号：111727008,31,相反，在产品能和品质越来越同质化的竞争条件下，我们国内手机市场 的很多手机界面形式雷同、内容单调、乏味、缺乏创造性，而产生了令人反感的“山寨”成灾的现状。因此，乏味的、千篇一律的手机界面已经不能够满足 各类适用人群的视觉审美需求。而界面形象、富有创造性、智能风格化的的手机界面则更能够体现出手机用户的审 美需求。所以我们中国也应该跟上时代的潮流去创造出 属于中国特色的手机界面风格，形成我们自己独特的一 套系统风格，使中国的手机行业在这激烈的市场竞争中 占有自己的一席之地。,数字媒体设计,Thank you,课程：数字媒体,老师：李双,学生：何大龙,课题：手机界面的视觉表达,
