第三章3.2 移动端界面设计要素（2）（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

3 移动界面设计要素 3.2.1纸上布局法 3.2.设计表现方法 尽管现在计算机与软件已经深入到设计师的日常工作中，但仍然有许多设计者保留在纸上绘制图画的习惯。在移动端界面设计初期纸上设计法也是团队讨论、头脑风暴、草图方案阶段采用的方法。这种方法便于快速记录设计概念、快速进行视觉展示，且便于修改。 如图3-17、图3-18所示，直接在规划好的移动终端上分别构思不同界面的草图，而图3-19中可以看出设计者胸有成竹的将自己的构思大胆的表现出来； 3 移动界面设计要素 图3-20则是针对某个页面的逐步完善构想。不管如何，如果一开始就想设计出一个完美的布局来是比较困难的，而是要在这看似很乱的图形中找出隐藏在其中的特别的造型。还要注意一点，不要担心设计的布局是否能够实现。事实上，只要能想到的布局都能靠现今的技术都能实现。 草图不是把一个页面完完整整的都画下来，而是只需要思考出大体的概括与需要增加的东西，做到心中有数，具体的还是要通过软件工具进行实现。当然，它不是最后的结果，而是后面制作时的依据。 3.2.2软件布局法 在移动端界面设计后期，通常采用软件绘制，如AI、XD、Figma、Sketch等这些常用软件。这种方法利用软件的绘制编辑功能形成真实完善的界面视觉效果，如图3-21至图3-23所示。 3.3.风格确定 APP整体设计风格指通过主要的几种颜色搭配、页面布局和NPC等给用户呈现出的整体视觉感受。因此启动APP设计时，首先应该确认整个APP的设计风格，然后其他页面依照统一的设计风格进行细致的设计美化。 APP设计风格从视觉效果上至少给用户传达了两个信息：一是APP的整体基调。二是APP的目标人群。微信是黑、绿、白三种主要颜色搭配，中规中矩的布局呈现给用户稳重、信赖的感觉。QQ默认皮肤是浅蓝、浅灰、白三种主要颜色搭配，灵活的布局交互呈现给用户活泼、有趣的感觉。 3 移动界面版式设计的原则 3.3.1 扁平化 在2013年的WWDC大会中，苹果公司发布的iOS 7系统界面打破拟物化效果，使用了更简洁的设计风格。随后这种风格被称为扁平化，开始了全面的普及与流行。如图3-26、图3-27所示，扁平化设计是在平面上以极简、抽象甚至符号的方式来表达用户界面上的对象，摒弃了高光、纹理甚至阴影等效果，简约而不简单，突出内容主题，排除不必要的视觉干扰，让用户更加专注信息本身。 3 移动界面版式设计的原则 1.扁平化设计特点 扁平化，简单的说就是使用一些简单的纯色块，从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生（图3-28至图3-30），其具有以下特点。 3 移动界面版式设计的原则 ①界面美观、简约大方、条理清晰 ②设计元素上强调抽象、极简、符号化，去除冗余的装饰效果突显App的文字图片等信息内容。 ③完美兼容pc网站、安卓、ios等不同系统的平台和不同屏幕分辨率的设备，适应性强。 ④使用更加高效。拟物化是时代过度中的一个不得已。拟物不等于高效，可拟物有时反而降低了效率。 ⑤缓解审美疲劳。随着Windows 8的Metro界面的发布，设计变的更简约清晰，如图3-31至图3-33所示对比效果。 3 移动界面版式设计的原则 2.扁平化设计的五大技巧 设计师将Metro语言比作是包豪斯风格，并且指出，“因为去掉了装饰，使得个性化的空间很小”，这可能给人以“缺乏生命力”的感觉，所以要想设计出好的扁平化设计，也是非常需要技巧的。 ① 简单的设计元素 扁平化完全属于二次元世界，即一个简单的没有景深的平面形状。扁平化其核心的就是放弃一切装饰效果，诸如阴影、渐变、透视、纹理等等。所有的元素的边界都干净利落，没有任何羽化、渐变或者阴影。尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单（图3-34至图3-36）。 3 移动界面版式设计的原则 ② 强调字体的使用 字体是排版中很重要的一部分，它需要和其他元素相辅相成，如果一款花体字应用在扁平化的界面上是非常突兀的。 ③ 关注色彩 扁平化设计中，配色是