高二机工社UI设计项目教程课件学习单元5项目1：音乐播放器界面设计

学习单元5——计算机软件界面设计. UI设计项目教程 单元概述 计算机客户端UI是非常重要的人机互动用户界面。由于计算机端和移动端在显示方面有很大的差别，所以在UI设计的过程中，需要注意区分不同客户端的设计规范的差异。本单元通过两个具体的计算机端软件UI设计的例子，展示了计算机端软件UI设计流程、设计规范及软件使用，通过本单元的学习，读者能够对计算机端UI设计有一定的了解和掌握。 学习目标 1．通过项目制作，掌握计算机端UI制作的流程和设计规范 2．通过项目制作，学习网页界面设计制作规范 3．通过案例学习Web产品的制作规范应用 音乐播放器界面设计 项目1. ONE 项目描述 嘀嗒音乐是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。该软件允许用户通过不同频道（如在线曲库、歌曲推荐、电台、K歌等）和在不同场景（运动、工作和约会等）快速地搜索最喜爱的歌曲，整个界面设计简洁清晰。软件还特别为用户提供了“我要K歌”的功能，更符合时下用户对唱歌的需求。 公司接到该任务后，组织设计师开展了需求分析会议，通过分析客户要求，确认了主要内容，助理设计师Bryan整理如下： 项目名称：嘀嗒音乐PC客户端开发UI设计 设计目的：设计可用、易用的PC端应用 工作内容：音乐软件开发的UI设计、主要页面布局设计、设计标准制定 使用方法：竞品对比、卡片分类、用户画像 需求定位：首先定位目标客户群，建立用户画像，检查主要功能流程，分析用户痛点，优 化调整功能流程，设计PC端主要功能流程及页面 预计周期：2018.2～2018.8 UI设计项目教程 任务1：图标绘制 最终效果 UI设计项目教程 任务1：图标绘制 UI设计项目教程 必备知识 界面设计风格 界面设计的风格多样，我们主要讨论以下两种风格，扁平化设计风格和拟物化设计风格。 扁平化设计 代表作：iOS7.0及以上，Metro UI，Windows 8。界面：纯色的简单组合（iOS系）、极简的抽象矩形单色色块（微 图5-9 拟物化设计和 扁平化设计 软系）、大字体、光滑、现代感十足，有种蒙德里安的感觉。 B端交互：因为扁平化设计的核心是对功能本身的使用（对内容本身的消费），所以去掉了冗余的界面和交互，而是使用更直接的设计来完成任务。 优点：界面和交互简约，信息更直观，信息量更大。 缺点：需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。 拟物化设计 代表作品：iOS7.0以下，Android以及iOS7.0以下的大部分APP。 界面：模拟真实物体的材质、质感、细节、光亮等。 B端交互：人机交互也拟物化，模拟现实中的交互方式。 优点：学习成本低，一学就会，而且传达了丰富的人性化的感情。 缺点：拟物化本身就是个约束，会限制功能本身的设计。 UI设计项目教程 必备知识 设计元素 扁平化设计一般都是一个简单的形状，加上没有景深的平面，放弃一切装饰效果，如阴影、透视、纹理、渐变等，能做出3D效果的元素一概不用。所有元素的边界都干净利落，没有任何羽化、渐变或者阴影。尤其在移动设备上，因为屏幕的限制，这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，用户使用起来格外简单。 UI设计项目教程 必备知识 扁平化设计 字体的使用　字体是排版中很重要的一部分，它需要和其他元素相辅相成，一般来说，花体字在扁平化的界面中会显得突兀，扁平化的界面多采用无衬线字体。无衬线字体比较醒目，在某些情景下会有意想不到的效果。 色彩选择　扁平化设计中，配色貌似是最重要的一环，扁平化设计大多采用大胆、丰富且明亮的配色风格。扁平化设计通常采用比其他风格更明亮更炫丽的颜色，同时扁平化设计中的配色还意味着更多的色调。例如，其他设计最多只包含2～3种主要颜色，但是扁平化设计中会平均使用6～8种颜色。另外，一些复古色也经常采用，如浅橙、紫色、绿色、蓝色等。 简单的交互设计　设计师要尽量简化自己的设计方案，避免不必要的元素出现在设计中。简单的颜色和字体就足够了，如果还想添加装饰，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效地把商品组织起来，以简单合理的方式排列。 伪扁平化设计　不要以为扁平化只是把立体的设计效果压扁，事实上，扁平化设计更是功能上的简化与重组。 扁平化设计的进化　扁平化设计风格大胆的用色、简洁明快的界面风格一度让大家耳目一新，但它被人所诟病的方面有交互不够明显，按钮难以找到等。这些问题都可以通过增加一些小效果解决，这些效果的运用也是符合扁平化的简洁美学的。 拟物化设计风格　通过模仿公众熟知的日常物体的视觉线索，拟物化设计能降低用户去了解如何使用产品时需要的认知负荷，通俗点说就是在设计相关产品时候，使得设计元素绘制得更逼真，如绘制的香蕉像是真