《UI界面设计》教学课件.pptx

《UI界面设计》UI界面设计USER INTERFACE0UI首课UI的学习准备UI DESIGN 了解UIUI即User Interface，用户界面的简称。泛指用户的操作界面，它包含了用户界面的视觉表现，涵盖了软件人机交互与操作逻辑。好的UI设计不仅能让界面更美观，还可以大大增加操作的舒适性。UI设计师软件使用平面编排规范掌握组件应用图标绘制UI设计UI的学习准备UI界面的COMPONENTS OF THE UI INTERFACE画画几何元素文字元素图标元素图片元素图片元素几何元素图标元素文字元素UI的学习准备UI学习，就是学会围绕设计目标，通过组织几何、图标、图片和文字这几个要素，形成美观的、可交互的界面。多通道设计反馈有效触动一致性内容优先简洁避免键盘输入卡片化设计情感化高效移动化易学易记流畅性减少页面跳转平台一致性亲密性手机界面基础UI该设计类型来讲，我们可以选择主要从学习网页设计和手机界面设计入手。我们可以理论和实践结合，“临摹+创作”的方法来进行学习，可以让学习效率加快。画画UI界面设计USER INTERFACEUI界面设计概论USER INERFACEUI界面设计到底设计什么？UI界面设计不止是手机APP设计网页设计手机界面管理界面电脑软件车载系统21网页设计尺寸规范 布局 视觉流程 图标 文字 色彩 教学内容手机界面设计尺寸规范 布局 图标 TAB栏 导航栏 手机主题设计 UI设计分类研究界面——图形设计师 Graphic UI designer研究人与界面关系——交互设计师 interaction designer研究人——用户研究工程师 User experience engineerUI即User Interface用户界面的简称。泛指用户的操作界面，它既包含了用户界面的视觉表现，又涵盖了软件人机交互与操作逻辑。苹果公司的第一代MAC电脑操作系统system 1.0已经具有了桌面、窗口、图标、光标、菜单和卷动栏目等项目UI 发展2002年2005年手机、电脑的附加软件ID设计和UI设计更紧密移动端UI设计开始萌芽flash-互动性专门针对软件产品的图形设计师和交互设计师相对成熟职业分工2000年2004年UI 前景 2010年苹果手机将UI炒出了新的热度，伴随着互联网加的深入，市场对UI设计师的需求可谓呈现井喷之势工作三年便能拿到丰厚月薪需求量供给量UI界面设计USER INTERFACE第一部分 网页界面设计10网页图标WEB DESIGN 网页设计基础4. 标志与形象栏画画1. 创意7. 网页图标5. 色彩3. 网页版式2. 视觉流程清晰6. 文字1. 创意2. 视觉流程3. 网页版式网页设计基础4. 标志与形象栏5. 色彩6. 文字7. 网页图标网页图标什么是图标？具指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。A图标在界面中的分类展示图标——不可点击 尺寸：24×24、28×28、32×32按钮图标——可点击 尺寸：44×44、48×48、56×56、64×64不可点击的展示图标 可点击的按钮图标网页图标网页中的按钮图标图标的尺寸icon的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48×48的icon，缩小2倍的时候24×24；而34×34的icon，缩小2倍的时候是17×17。在图标中应尽量避免出现单数。图标的设计原则更具识别性图标本身的功能便是第一时间传递信息。因而我们需要使用更加具象的视觉语言，使得信息传达更为准确。A更具一致性使图标一致性是一套图标系统成功的关键之一。在这里的统一性不是指所有的图标里面都要用一模一样的元素，而是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致。当所有的图标都用一样的元素在里面时，会造成辨认困难。BC适度的情感化体现作为一个金融产品，在用户使用界面时，我们想更改从前用户对金融产品严肃气质的认知，采用更为丰富的造型与颜色使页面更具亲和力。保持相同的大小与间距；方圆处理图标的风格图标的风格时下流行的图标可以归纳为：线性图标、面性图标、线面结合图标。至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。下图为在dribbble上看到一些比较好看的icon设计，作者ID均备注在右下角，在此仅供参考。除了在dribbble、站酷、花瓣、优设、iconfont等找好看的图标以外，还可以参考市面上主流的那些app中的图标。图标风格参考网页图标手绘风格图标网页图标彩绘风格图标网页图标像素风格图标扁平化图标拟物化与扁平化扁平化图标扁平化中的色块网页图标网页图标UI界面设计USER INTERFACE第一部分 网页界