《UI设计》课件——1.界面基础之组件.pptxVIP

`INTERFACE

DESIGN`;组件

UIKit;拟物化时期的UI组件设计

掌握组件的类别并找到合适的视觉风格;拟物化的按钮设计（左、中），手机导航设计（右）;拟物化时期按钮设计利用光影、质感、立体结构

表现不同状态(网页设计/PC端)，创意注意隐喻;2020新拟态设计/shotsNeumorphic-Rebound-of-Nomad-iOS-UI-Kit;/shots/9838619-Music-Player-Neumorphism-Rebound-shot;组件作用

UIKit;组件的作用：

1、为了呈现不同信息，调用不同组件，例如

栏（搜索栏）

框（警告框）

表单（活动菜单）

控件（按钮）

等；

通过不同的组件的组合，来组织形成页面;拟物化按钮，通过质感、光影、颜色表现出不同的状态；

扁平式按钮，通过颜色（做好主色、次色、背景色的协调搭配），才能凸显状态

常通过线面图标互相转化展示不同的状态;组件的作用：

3、组件之间需要统一

控件的细节、颜色;MaterialDesign

界面风格

扁平式组件

（无光/无拟物质感/无立体结构）

;界面→信息层级

（1）通过层级叠加的颜色变化

（2）通过阴影

;;组件之表单：图标+文字；图标都有帮助快速识别的作用，红点与图标的层级关系;扁平式，通过渐变叠加、对比色使用，又或者2色叠加、3色叠加等多种多样的方式来营造图标的多彩感。;是否使用渐变需要根据整体APP的视觉风格而定，以下有几点渐变按钮的建议：（1）渐变色采用邻近色组，纯色调。背景色不宜再搭配渐变，而可以纯4号或暗10号。（2）彩色投影来源于元素本身，通过对颜色对透明度调整来达到效果。

（3）与渐变色搭配的文字或符号用“白色”效果更佳;（左）Windows时期扁平式设计（右）dribbbleUIkit设计及排版;dribbbleUIkit设计及排版;APPUI基础样式库

图标

弹框

按钮

列表：单行/双行/多行

卡片列表

导航栏、标签栏、搜索栏

选择项目

进度条

对话框;页面类型;

状态栏：与设备当前状态相关的有用信息，比如时间、运营商、网络状态以及电池容量。

导航栏:导航栏能够实现应用不同信息层级间的导航

标签栏：标签栏最多一次可承载5个标签。超过会造成视觉略显拥??，主模块不宜过多。

*工具栏：工具栏中的所有指令和操作是针对当前屏幕和视图的。

工具栏的场景：

①内容详情页中，放置针对当前内容的编辑操作按钮。比如知乎日报内容详情页工具栏，包含针对当前内容的功能按钮以及导航按钮，位于屏幕底部。

②图文编辑页面中，放置编辑时用到的工具按钮。

③针对列表项中的内容进行编辑，比如淘宝购物车工具栏，用于编辑购物车中商品，位于标签栏之上。;京东主界面

打开APP进入的第一个界面叫“主界面”;页面类型：一级页面/聚合页面;列表页/二级页面

定义：由同一内容组成并展示，如某一分类；某一功能。底部标签消失

作用：可以直观了解所在板块的同等内容，可以做对比。

样式：可以是两栏、单列；列表式或卡片式；

内容：文字、图文、视频;营养跟踪_主要功能流程图展示：关于如何记录食物文章出处：mediumUI/UX案例研究：营养跟踪应用程序;详情页/二级或二级之后

定义：由同一内容组成并展示，有交互的控件出现

作用：引导用户了解后做出相关操作，如社交互动、编辑、交易等

样式：根据内容进行排版，需要预留控件位置;绿洲APP

社区类;页面类型：提交页;营养跟踪_主要功能流程图展示：关于如何记录食物文章出处：mediumUI/UX案例研究：营养跟踪应用程序;页面类型小结;页面跳转小结;其他例子;瞬间导航之侧边抽屉、下拉菜单;全局导航之陈列馆式

现在主流界面；

呈现实时内容居多：附近、热点、新闻、动态、图片……；

;APP分类;产品开发的思维;产品内容为工具类的应用,通常在首页，可以以工具的元素，进行沉浸式的页面设计;平台类：搭个台，人与人在上面互相联系；滴滴网约平台（社交属性/兴趣导向/交易）;生态圈：个人与社会各领域产生联系，可以是多线程联系，完成交付行为;生态;APP产品分类

参考各大下载市场

或“最美应用”;补充资料

组件的类型小结;2、个人临摹组件库，3-5个不同的组件（请见“组件案例参考”文件夹，也可自己找图片），尺寸A4，横向版面;

格式JPG;

文件命名“学号姓名临摹XX组件”;

课堂提交。

;组件的作用来思考新拟物化风格

1、为了呈现不同信息，调用不同组件，通过不同的组件的组合，来组织形成页面

2、通过不同状态或不同层级信