黑马程序员技术交流社区

标题: 【杭州校区】UI基础知识 [打印本页]

作者: 小江哥 时间: 2019-4-25 16:00
标题: 【杭州校区】UI基础知识
微扁平:微扁平常出现在需要撑起视觉的画面中,微扁平图标出现在app比较重要的按钮上
图像描摹:在ai中打开图片可以直接点击属性栏中的图像描摹将其转换为形状(常用于图形边缘清晰的图像)
      描摹完后要点击扩展并取消编组
微扁平图标结构:衬底(插画/渐变/色块..)  表现功能的图标装饰
移动端功能性图标几种形式:  未选中(线性)  选中(面性) 不可点击状态(一般呈现灰色)
PC端按钮图标状态:默认状态  鼠标移入状态  点击状态不可点击状态
app界面图标按钮类型(4类):  线性面性微扁平风格化

H5的概念:H5(HTML5的缩写) 是标准通用标记语言下面的超文本标记语言(HTML)的第五次重大修改
从行业上来说 H5指的是移动端网页(移动端专题页)
一般设计师及运营人员会称之为H5 开发与技术称H5更多为HTML5
H5从页面开发上的三个优势:1.跨平台 2.成本低 3.传播性
H5开发流程:产品/运营做市场调查出文档 --- 设计师设计页面 -- 前端写H5代码
APP与H5优势劣势对比: 1.开发:APP每个平台都需要独立开发  H5只需要开发一次,每个平台都可以通过联网打开
                  2.迭代:APP需要不停的升级迭代同时考虑上传平台审核 H5联网刷新即可更新
                  3.成本:APP需要一个团队来完成(半年内)  H5只需要设计师与前端人员就可以完成(1到2天)
                  4.使用成本:APP需要下载并有较高学习成本 H5只要能联网即点即显(微信/浏览器等)
                  5.开发周期:APP需要3到6个月 H5需要一两天既可完成
                  6.传播途径:APP需要硬广宣传(花钱推广告) H5一键发送分享病毒式传播
                  7.交互响应:APP下载到本地很多功能不需要联网即可使用 H5在网络不稳定时会有卡顿
                  8.技能操作:APP可以调用手机功能(相机/重力感应/麦克风等) H5不可以
                  9.用户粘度:APP只要有需要的功能就不会被弃用 H5看得快忘得快
判断是否为H5页面方法:1.看断网情况(APP原生页面可以打开,H5则无法打开, 出现404等错误)
                  2.看加载形式:H5在打开过程中会有一条加载线提示  APP则可以直接打开
                  3.看顶部导航栏是否有关闭按钮  APP原生页面为返回按钮,H5则为关闭按钮
                  4.看长按页面是否有复制功能原生APP不能复制
趋势:H5轻应用,流量中枢(小的项目/活动会使用) APP重应用用户粘度高
H5广告分类(设计风格):1.手绘风格(需要一定的手绘能力) 2.扁平插画风格 3.3D风格    4.平面风格
站酷 -- 网页 -- 移动端网页
移动端开发尺寸:750px*1334px (苹果2倍设计尺寸) --- 状态栏:40px 导航栏:88px

交互:交流互动  人与机器/人与机器与人
设计基于功能
而功能产生于用户需求
脱离了用户所做的设计  没有任何意义
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 不生成任何文件使用浏览器查看效果



$顶顶顶顶#$%

网页加载等待极限为7秒

http://www.93jiang.com/

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2