UI基础及交互相关知识【黑马UI培训】

设计:for you      艺术:fou me 什么是UI? 与界面相关  存在交互关系 好的UI设计要满足界面美观 交互清晰 体验良好 常见系统:安卓  IOS    UI分类:移动端   PC端   web端    其他终端 智能说明书: UI:主要负责界面/交互设计             UE(交互设计师):主要将文档转换为视觉框架图             网页设计师:主要负责企业网站设计,重功能请视觉 (会HTML+CSS代码)             电商设计师(美工):重视觉,一般制作首页/专题/banner             全能设计师:负责公司整体视觉相关设计 图标的分类:扁平化(面性/线性)    微扁平    拟物化(写实)    超写实 什么是图标?  --- 具有明确指代含义的计算机图形 好的图标要风格统一,视觉平衡,含义明确,协调美观 图标参考网站:https://www.easyicon.net/              https://www.iconfont.cn/ 微扁平:微扁平常出现在需要撑起视觉的画面中,微扁平图标出现在app比较重要的按钮上 图像描摹:在ai中打开图片可以直接点击属性栏中的 图像描摹 将其转换为形状(常用于图形边缘清晰的图像)          描摹完后要点击扩展 并取消编组 微扁平图标结构:衬底(插画/渐变/色块..)  表现功能的图标   装饰 移动端功能性图标几种形式:  未选中(线性)  选中(面性)   不可点击状态(一般呈现灰色) PC端按钮图标状态:默认状态  鼠标移入状态  点击状态   不可点击状态 app界面图标按钮类型(4类):  线性   面性    微扁平    风格化 交互:交流互动  人与机器/人与机器与人 ☆☆☆☆☆ 设计基于功能 而功能产生于用户需求 脱离了用户所做的设计  没有任何意义 UE -- 用户体验(用起来好用)   -- 互联网界面产品 UI -- 用户界面(看起来好看) UX -- 用户体验,从更加广度体验整个产品过程(视觉/听觉/触觉等)  -- 公司所有产品(实物/虚拟物) UE与UI区别: UE90%逻辑思考+10%视觉产出(原型图)             UI70%视觉产出+30%逻辑思考(用户交互尺寸规范) 一个完成项目人员及工作内容: 老板/甲方:最高指示,提出想法 产品经理:市场调研(调研产品的可行性)          竞品分析(取其精华去其糟粕)          产品方向(根据市场调研结果及竞品分析完成产品方向定制)          沟通把控(与团队及老板的沟通)          原型图(根据分析完成原型图绘制)          数据总结 UI/UE: UI --- 视觉效果/icon设计/切图标注        UE --- 用户体验/交互原型/原型图 研发工程师:IOS/安卓/网页前端/界面还原/后台支持/功能实现/接受反馈/修复BUG/提交审核 测试(QA):小问题会与研发交流/发布测试报告/反馈问题 运维/营销: 运维 -- 服务器运作  问题收集            营销 -- 广告推广/双微运营/线上线下活动       双微运营:微博微信   微博 -- 曾热点,广义推广                微信 -- 写文章,用户深度 一个完整的项目流程:   需求阶段 -- 老板/甲方提出需求----产品(承上启下)                       研发阶段 --  原型图----UI研发同时进行--测试--上线  (审核:IOS7到15天/安卓3到7天)                       上线后 -- 运维/营销 -- 日常维护收集问题 --- 升级迭代 UI设计师需要参与的7大阶段:1.产品定位(一般不需要UI参与,但是对于产品懂与不懂有很大区别)                           2.需求分析(在启动会议或项目会议中会需要我们UI设计师提出设计方向的建设性意见)                           3.架构设计(一般由产品出框架图,也可能由UI/UE出 -- Xmind)                           4.原型设计(产品经理/UE/UI完成)                           5.界面设计(UI设计师主要工作内容 - 将原型图转换为视觉界面)                           6.界面输出(设计师需要将设计好的界面切图标注交于开发)                           7.测试上线(需要设计师参与产品测试找出bug完成修复以及后期产品迭代) UE做的事情  发现问题/解决问题       发现问题: 1.用户调研:5W+1H原则 -- 什么样的群体在什么时候什么地方为什么且如何用一个什么样的产品                 2.竞品分析:下载竞品 分析设计角度 应用角度  用户角度                 3.产品测试:开发团队及目标人群/竞品人群/公司内部推广及市场人员                 4.用户反馈:通过用户反馈及界面数据分析发现问题           原型图:根据线条、图形描绘出的产品框架，也称线框图     原型图三要素:1.内容大纲(什么东西)   2.信息结构(在哪)   3.用户交互行为(怎么操作) 用户体验遵循原则:操作前有预知  操作中有反馈   操作后可撤回       解决问题(原型绘制):制作原型图/定制交互规范/设计交互动作/迭代修改       原型图类型:1.线框图(手稿):便于绘制与修改,不方便保存和展示               缺点:非专业人士看不懂                  2.低保真原型图:使用软件绘制产品原型界面,交互逻辑完整         缺点:需要花时间制作,非专业人士无法讨论                  3.低保真交互图:将低保真原型制作成交互动态效果,方便讨论和产品实现     缺点:时间成本高 必要性不大                  4.高保真原型:UI设计师设计完的界面 视觉上等同于产品最终形态           缺点:体验不够立体                    5.高保真交互图:接近产品最终形态,交互逻辑清晰可见               缺点:时间成本很高 AXURE:一款用来快速绘制原型的软件 返回:ctrl+Z   撤销返回:ctrl+Y 选择工具:选择(容差选择):鼠标拖拽接触到的原件都会被选中          包选:鼠标拖动范围内的被选中          链接:可以给原件添加链接线 缩放:ctrl+加号 放大     ctrl+减号缩小     也可以按ctrl键滑动滚轮进行缩放 编组:ctrl+G   解组:ctrl+shift+G 注意:Axure软件界面如果错乱  可以在 菜单 -- 视图 -- 重置视图 还原 Axure默认一次只能打开与编辑一个项目   如果需要编辑多个项目可在再次双击启动图标双开 元件左上角的黄色三角可以鼠标点击拖动修改圆角 元件右上角的小圆圈可以鼠标点击切换元件形状 在Axure中可以按住ctrl键拖拽元件进行复制 预览:F5   不生成任何文件使用浏览器查看效果