恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
了解UI设计基础概念
0.0°
2017-03-16 好文转载 经验/观点 原作者: 丝路教育 举报 4339 5 12 1


  今天和大家分享的是UI的基础概念,作为UI设计师都是必须知道的。一起来看看吧。


一、UI的相关概念


  1、UI即User Interface(用户界面)的简称。


  用户界面指人和机器互动过程中的界面,以手机为例,手机上的界面都属于用户界面,我们通过对这个界面向手机发出指令,手机根据指令产生相应的反馈。设计这套界面是觉得人就称为UI设计师。在设计师领域,在PC端从事网页设计的人我们成为WUI(Web User Interface)设计师或者网页设计师。在移动端从事移动设计的人,我们称为GUI(Graphics User Interface)。一般情况下,小企业不会分那么清楚,都统一称呼UI设计师,反正产出的都是界面,都需要对产品的界面视觉负责。

Image title


2、UE即User Experience(用户体验)


  UED即User Experience Design(用户体验设计)


  用户体验指用户在使用产品过程中的个人主观感受,一般要关注用户使用前,使用过程中和使用后的整体感受,包括行为、情感和成就等各个方面。


  用户体验设计就不光是对前期的用户体验方面做打算,他们需要用自己的知识、经验、设计能力拿出设计方案,自从2006年淘宝把设计部门称为UED之后,国内很多企业跟风把设计部分也改为UED。但是很多UED团队名不符实,团队中甚至没有独立设置用户体验研究的职位,这个职位可能就是产品人员或者界面设计师承担了。


  到产品层面上,用户体验包含以下几点:


  *产品性能:产品是否够快、是否稳定、是否占很多的系统资源等。


  *产品内容:产品的内容是否可以为用户解决一定的问题,是否达到了用户需求,解决了用户的痒点。


  *产品交互:交互是否流畅,用户是否能快速准确的找到自己想要的功能。


  *产品界面:界面的风格是否统一、整齐、给用户带来高质量的感觉。


二、UI的学习方法


  很多想学UI的北鼻们,一开始都会问一个问题“不会画画还能不能学UI?”其实学习UI不需要你一定有美术基础的,当然你有美术基础更好。但是如果你没有但是你又想从事这个职业,那必须有审美,有色彩感。可以多看一些基础类知识,知识应该了解物体的透视、光照射的角度、在对应的形状中表现出怎样的明暗分布等。


 1、图形基础


  美术生基础课就是三门:


  素描、速写、色彩

Image title

Image title

Image title


 2、软件的应用


  *Adobe Photoshop,简称“PS”,一款老牌像素处理软件,各个设计行业图形处理都会用到,可以满足UI界面设计的日常需要。


  *Adobe illustrator,简称“AI”,是矢量软件,在处理一些复杂的图形路径时,可以考虑使用。一般在AI中绘制图标然后潜入PS中。


  *Adobe After Effects,简称“AE”,现在扁平化设计成为主流,所以动效也就比较流行。


  *Ps Play,是一个通过Wi-Fi网络,实时在终端设备上预览电脑上Photoshop的设计稿,可同步调试及截图保存到移动终端,并可以通过Email、微信等工具即时分享的跨终端应用。


  *MarkMan,是一款标注软件,在移动设计中设计师要对自己设计的图进行标注切图。

Image title


 3、设计规范


  一般设计的应用是基于IOS系统和Android系统运行。这两个系统都有其官方的系统规范,这些规范都罗列了详细的通用型设计框架。如各自系统状态栏、各个系统下的尺寸、导航栏和标签栏的高度是多少、手机屏上最适字号是多大等。这个后面会具体说啦。


 4、临摹学习


  现在有很多设计网站,要多利用业余时间去临摹。比如站酷、UI中国、dribbble、behance等等,设计这个东西每天都在发生着变化,你只有每天去看最新的设计师作品,才能跟上时代潮流,走上人生巅峰。


 5、参与项目


  经历一套完整的设计流程是最好的学习锻炼方式。从一开始的讨论原型图到出设计效果图,再到标注切图给开发者。效果图不断导出到手机上预览,核对电脑的设计稿和手机上预览的差距,你会从实践中不断提高。也可以通过假设的设计项目,也就是Redesign(再设计),比现有比较火的app重新构造做设计稿,同时能把自己设计思路完整展现说明出来。之前有过这样的案例,某设计师不满意Facebook的界面,按自己的想法重新设计了界面,并在设计网站上展示,由于二次设计的效果出色,还吸引了Facebook的注意,最终收到了Facebook的Offer。

Image title


  课程一里面我们大概了解了UI的定义和一些前期的准备。那今天我们就真正的走进移动UI设计了。


 一、什么是App


  APP是英文Application的简称,指运行在手机系统上的应用程序软件,比较著名的App商店有Apple的iTunes商店,Android的Android Market,诺基亚的Ovi store,还有Blackberry用户的BlackBerry App World,以及微软的应用商城。目前主流智能手机的操作系统还是iOS和Android。其他智能手机系统份额非常小,我们可以先忽略不计。我们需要掌握好这两种系统的应用界面设计知识。


 二、App的开发流程


  UI设计只是整个应用开发的一个环节,如果你想更好的展开设计工作,就需要掌握App开发维护整个流程。

Image title


  *产品经理(Product Manager):一般负责收集需求、整理需求、商务沟通等工作,他会根据产品的生命周期,协调设计、研发和测试还有运营。最终产出低保真的原型说明文档(也就是线框图)表达产品的流程、逻辑、布局、视觉效果和操作状态等。


  *交互设计(User experience design):会继续深入这个低保真原型,一般企业产品经理承担了这个工作。如果有专门的交互设计,他更多的会考虑用户流程、信息框架、交互细节和页面元素等。有些企业会让其做出高保真的原型,高保真原型是无限接近最终效果图的线框图,表达产品的流程、逻辑、布局、视觉效果和操作状态等。


  *视觉设计(User Interface):终于到我们了,拿到无论是低保真还是高保真原型图,我们不仅仅是美化界面。我们要对原型有深入的了解,需要了解整个页面的逻辑,从全局的角度来做视觉设计。好的UI不仅是让产品变得个性有品味,还要让产品操作变得舒适、简单、自由、充分体现产品的定位和特点。最终产出物是各种图片、界面标注和界面切图。


  *程序开发:程序员根据设计图搭建界面,根据产品提供的功能说明文档去开发功能,最终产出物是可使用的应用。


  *测试:产品完成之后,还需要测试人员测试应用,主要分为单元测试、真机测试、功能测试、测试跟踪和出测试报告。


  *运营:运营人员就是需要通过各种手段提升应用的人气,同时把用户反馈的问题提供给产品人员,然后产品人员再次发起应用的版本迭代。


三、智能手机的屏幕


  我们常看到手机介绍中一堆的参数,说实话,在这之前我都搞不太清楚。比如:手机屏幕是多少?手机的分辨率是多少?是否是高清视网膜屏幕等等。所以我们先了解一些常见的相关于屏幕的概念。


1、英寸(Inch)


  英寸一般为1in=2.54cm,如果你不知道2.54cm是多长的话你可以看看你大拇指,大概就是你一节大拇指的长度。很多图纸、铭牌上都是使用英寸作为长度单位。手机屏幕、电视机也继承了这个计量单位。


  iPhone4s的屏幕尺寸是3.5英寸,表示屏幕斜对角线的长队。乔布斯认为3.5英寸是人类单手持设备的最佳尺寸。但是随着时代的发展,人们每天愿意花几个小时在手机上面双手操作,它渐渐变成了内容消费和娱乐的主要平台。3.5英寸的手机已经满足不了大家的需求,所以现在手机屏幕越来越大化。


  手机常见屏幕尺寸有3.5英寸、4.3英寸、4.7英寸和5.5英寸。为什么会选择这几个尺寸?因为手机屏幕使用的玻璃是一整块生产的,然后切割成一块一块的。利用率与成本直接相关,为了获得最优的玻璃切割利用率,避免浪费。


  以后再看到英寸,知道多大了吧。

Image title


2、像素(Pixel)


  我们图片放大,能看到许多色彩相近的小方点,这些小方点就是像素点,像素是图像的基本采样单位,它不是一个确定的物理量,因为像素的大小诗不确定的。

Image title


3、分辨率(Resolition)


  分辨率就是屏幕像素的数量,一般用屏宽像素乘以屏高像素表示。比如iPhone6的屏幕分辨率是750*1334,也就是说它是由750列和1334行的像素点排列组成。通常情况下,图像的分辨率越高,所包含的像素就越多,图像就越清晰,印刷的质量也就越好。同时,它也会增加文件占用的存储空间。

首发地址: 了解UI设计基础概念_丝路教程网

资源地址: http://blog.silucg.com/UI/5287.html(分享请保留)

更新:2017-03-16

收藏

5人已收藏

  • 67

    作品

  • 245

    粉丝

  • 0

    关注

  • 网页设计中对齐原则的运用
  • 如何有效利用网页设计中的留白
  • 6招搞定网页设计中Banner的点缀元素运用
  • APP原型设计表现方式大揭底
相关标签

    猜你喜欢

      2017-03-16 好文转载 经验/观点 原作者: 丝路教育 举报 4339 5 12 1

      了解UI设计基础概念

      0.0°

      你确定要举报了解UI设计基础概念

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年02月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      5
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录