第一篇:UI设计基础知识 免费
UI设计基础知识
UI设计学习者经常会陷入迷茫期,学习内容零碎杂乱、自觉性差、水平不够、无人指导走弯路等问题接踵而来,导致很多人半途而废。要想从零基础小白成长为真正的UI设计师,需要制定合理的学习计划,并加以系统的学习课程,才能助你快速成长为一名优秀的UI设计师。
一、【UI设计需要学什么?】UI设计学习内容分四大阶段:
01必不可少的软件基础:熟练掌握UI设计基本软件Photoshop、Illstrator核心功能,让成为UI 设计师事半功倍。
02各模块的设计学习:系统全面学习习近平面设计、网页设计、APP设计、交互设计等各个版块,打造会设计、知交互、懂用户体验的UI设计师。
03UI项目实训:通过项目实战案例的练习,积累设计经验,提升设计整体水平。04高薪就业指导:提升综合素质及实际求职能力。
二、UI到底是什么?
User Interface(用户界面),简称UI,是指从事对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分三个分支:
1、研究界面——图形设计师Graphic UI Designer,简称GUI,国内目前大部分UI工作者都是从事这个行业。包括(网页设计,软件界面,移动端界面设计),每天工作做着各种界面设计。
2、研究人和界面的关系——交互设计师Interaction Design,简称ID,做整个项目的交互和流程。
3、研究用户体验——用户体验设计师User Experience,简称UE,主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面,从而对这个项目的总体性体验做决策。
UI设计是屏幕产品的重要组成部分。界面设计是一个复杂的由不同学科参与的工程,认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是: 1.置界面于用户的控制之下; 2.减少用户的记忆负担;
江西新华电脑学院
3.保持界面的一致性; 即要符合用户的心智模型。
所以一个优秀的UI设计师,从技能上讲,不仅能画图标,还能做好界面,会很多交互知识。
好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
图标,界面,交互知识都是需要长期的经验积累,所以UI这条路很长,要学的技能很多,大家加油吧!
三、UI设计师工作中都做些什么工作? 1.视觉设计(GUI)
界面设计并标注尺寸(设计规范); 图片资源导出给程序员(切图); 启动图标设计;
制作海报、商品图、活动页面等图片资源; 提交到各大平台的推广图。2.交互设计(ID)需求分析;
理清操作流程(流程图、线框图);
负责项目中各种交互元素的设计(交互文档、界面跳转、图标、按钮、动效); 优化页面,使用户操作更人性化。3.用户体验设计(UE)测试软件功能、界面美观; 搜集用户反馈,提供优化意见; 参与到产品迭代过程中。
大部分公司招UI需求上包含以上所有内容。大点的公司会细化以上职责。所以一个好的UI设计师需要学习的知识是巨大的。
四、UI设计师工作流程是什么? 1.需求分析阶段
此阶段,遵循3w原则(who目标人群、where使用场景、why解决什么问题),梳理产品需求,分析相关竞品,确定功能模块。输出:需求文档。2.视觉概念设计阶段
江西新华电脑学院
在确定产品需求后,交互设计尚未完成前,由GUI主导,根据需求文档及竞品分析后作出的只关注产品视觉主要特征的设计工作。输出:视觉概念方案2套备选。3.视觉详细设计阶段
通过视觉概念设计确定产品界面视觉效果,并根据交互设计确定产品每个界面具体的布局以及内容后,便进入到视觉界面详细设计阶段。此阶段需要输出所有典型界面的效果图(高保真原型),控件的所有不同状态效果图。输出:设计方案效果图。4.设计评审阶段
设计师在发起评审前需先在线下与其主管沟通并确认参与评审作品的质量,确保用于评审的作品无重大纰漏再发起评审。评审的意义在于获得不同领域反馈,检查设计是否存在偏离,是否存在对产品有害的部分,并诱发设计师潜力。输出:演示文档。5.标注、切图、命名规则
通过评审对视觉设计定版后,需要为开发提供程序使用的图像资源,开发必需以此为依据完成页面开发。
输出:切图包,内含图片资源(注意命名规则)、界面原图、界面标注图、规范文档。6.视觉测试阶段
将图片资源及规范发给开发后,设计师需要根据设计图判断开发实现的界面是否符合设计方案,并在开发工程师在界面构建过程中遇到问题时给予所需的解决方案。
输出:新修改的图片资源、新的规范、测试报告。7.开发完成、投入使用
制作各平台宣传图片资源,参与产品体验测试,搜集用户意见,为产品迭代确定方向。
输出:图片资源、测试报告。
江西新华电脑学院
第二篇:UI设计思路
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
UI设计思路
UI测试用例设计方向[转]
设计功能和界面测试用例
1.1 文本框、按钮等控件测试
1.1.1 文本框的测试
如何对文本框进行测试 a,输入正常的字母或数字。b,输入已存在的文件的名称;
c,输入超长字符。例如在“名称”框中输入超过允许边界个数的字符,假设最多255个字符,尝试输入
256个字符,检查程序能否正确处理;
d,输入默认值,空白,空格;
e,若只允许输入字母,尝试输入数字;反之;尝试输入字母; f,利用复制,粘贴等操作强制输入程序不允许的输入数据; g,输入特殊字符集,例如,NUL及n等;
h,输入超过文本框长度的字符或文本,检查所输入的内容是否正常显示;
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
i,输入不符合格式的数据,检查程序是否正常校验,如,程序要求输入年月日格式为yy/mm/dd,实际输入yyyy/mm/dd,程序应该给出错误提示
在测试过程中所用到的测试方法: 1,输入非法数据; 2,输入默认值; 3,输入特殊字符集; 4,输入使缓冲区溢出的数据; 5,输入相同的文件名;
--命令按钮控件的测试
测试方法:
a,点击按钮正确响应操作。如,单击确定,正确执行操作;单击取消,退出窗口;
b,对非法的输入或操作给出足够的提示说明,如,输入月工作天数为32时,单击”确定“后系统应提示:天数不能大于31;
c,对可能造成数据无法恢复的操作必须给出确认信息,给用户放弃选择的机会;
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
--单选按钮控件的测试
测试方法:
a,一组单选按钮不能同时选中,只能选中一个。
b,逐一执行每个单选按钮的功能。分别选择了“男”“女”后,保存到数据库的数据应该相应的分别为“男”“女”;
c,一组执行同一功能的单选按钮在初始状态时必须有一个被默认选中,不能同时为空;
---up-down控件文本框的测试
测试方法:
a,直接输入数字或用上下箭头控制,如,在“数目”中直接输入10,或者单击向上的箭头,使数目变为10;
b,利用上下箭头控制数字的自动循环,如,当最多数字为253时,单击向上箭头,数目自动变为1;反之亦适用;
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
c,直接输入超边界值,系统应该提示重新输入;
d,输入默认值,空白。如,“插入”数目为默认值,点击“确定”;或,删除默认值,使内容为空,单击“确定”进行测试; e,输入字符。此时系统应提示输入有误。
------组合列表框的测试
测试方法:
a,条目内容正确,其详细条目内容可以根据需求说明确定; b,逐一执行列表框中每个条目的功能; c,检查能否向组合列表框输入数据;
------复选框的测试
测试方法:
a,多个复选框可以被同时选中; b,多个复选框可以被部分选中;
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
c,多个复选框可以都不被选中; d,逐一执行每个复选框的功能;
----------列表框控件的测试
测试方法:
a,条目内容正确;同组合列表框类似,根据需求说明书确定列表的各项内容正确,没有丢失或错误; b,列表框的内容较多时要使用滚动条;
c,列表框允许多选时,要分别检查shift选中条目,按ctrl选中条目和直接用鼠标选中多项条目的情况;
滚动条控件的测试
要注意一下几点:
a,滚动条的长度根据显示信息的长度或宽度及时变换,这样有利于用户了解显示信息的位置和百分比,如,word中浏览100页文档,浏览到50页时,滚动条位置应处于中间;
b,拖动滚动条,检查屏幕刷新情况,并查看是否有乱码;
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
c,单击滚动条; d,用滚轮控制滚动条; e,滚动条的上下按钮。
各种控件在窗体中混和使用时的测试
a,控件间的相互作用;
b,tab键的顺序,一般是从上到下,从左到右; c,热键的使用,逐一测试; d,enter键和esc键的使用;
在测试中,应遵循由简入繁的原则,先进行单个控件功能的测试,确保实现无误后,再进行多个控件的的功能组合的测试。
ps:密码输入框测试时要特别注意进行字母大写输入的测试。
查找替换操作
案例演示:打开word中的“替换”对话框 测试本功能有通过测试和失败测试两种情况 通过测试: 1,输入内容直接查找,或查找全部
2,在组合框中寻找已经查找过的内容,再次查找并确认文档的内容正
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
确,如,已经查找过“测试用例”,再次进入不用重新输入查找内容,直接在文档中搜寻就可以.失败测试: 1,输入过长或过短的查询字符串.如,假设查询的字符串长度为1到255,那么输入0,1,2,256,255和254进行测试;2,输入特殊字符集,如,在word中.^g代表图片,^代表分栏符,可以输入这类特殊字符测试;
替换测试大体相同.关于编辑操作窗口的功能测试的用例: 1,关闭查找替换窗口.不执行任何操作,直接退出;2,附件和选项测试.假如,设定“精确搜寻”,“向后”搜索等附件选项等等来测试;3,控件间的相互作用.如,搜寻内容为空时,按钮“搜寻全部”,“搜寻”,“全部替换”,“替换”都为灰色.4,热键, Tab键.回车键的使用.插入操作
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
1,插入文件 测试的情况 a,插入文件;b,插入图像;c,在文档中插入文档本身;d,移除插入的源文件;e,更换插入的源文件的内容;
2,链接文件 测试方法: a,插入链接文件;b,在文档中链接文档本身;c,移除插入的源文件;d,更换插入的源文件的内容.3,插入对象 要测试的内容
a,插入程序允许的对象,如,在word中插入excel工作表;b,修改所插入对象的内容.插入的对象仍能正确显示;c,卸载生成插入对象的程序,如,在word中插入excel工作表后卸载
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
excel,工作表仍正常使用.编辑操作
编辑操作包括剪切,复制,粘贴操作.测试剪切操作的方法
a,对文本,文本框,图文框进行剪切;b,剪切图像 c,文本图像混合剪切 复制操作方法与剪切类似.测试时,主要是对粘贴操作的测试,方法是: a,粘贴剪切的文本,文本框及图文框;b,粘贴所剪切的图像;c,剪切后,在不同的程序中粘贴
d,多次粘贴同一内容,如,剪切后,在程序中连续粘贴3次;e,利用粘贴操作强制输入程序所不允许输入的数据.精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
界面测试用例的设计方法 1,窗体
测试窗体的方法: a,窗体大小,大小要合适,控件布局合理;b,移动窗体.快速或慢速移动窗体,背景及窗体本身刷新必须正确;c,缩放窗体,窗体上的控件应随窗体的大小变化而变化;d,显示分辨率.必须在不同的分辨率的情况下测试程序的显示是否正常;进行测试时还要注意状态栏是否显示正确;工具栏的图标执行操作是否有效,是否与菜单懒中图标显示一致;错误信息内容是否正确,无错别字,且明确等等;
2,控件 测试方法: a,窗体或控件的字体和大小要一致;b,注意全角,半角混合 c,无中英文混合.菜单
进行测试时要注意
精心收集
精心编辑
精致阅读
如需请下载!
演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案
a,选择菜单是否可以正常工作,并与实际执行内容一致;b,是否有错别字: c,快捷键是否重复;d,热键是否重复;
精心收集
精心编辑 精致阅读 如需请下载!
第三篇:UI设计教学
实用的UI设计教程
什么是UI?
UI英文全称是:USER INTERFACE,中文即是用户界面 UI包括三大块,UX用户体验,GUI视觉表现,HCI人机交互 零基础学员怎么学习UI 首先,工欲善其事必先利其器!
先要学会PS(98%的设计师工作中会用到)AI(60%的设计师工作中会用到)DW(30%的设计师工作中会用到)FLASH(15%的设计师工作中会用到)3D视频(10%的设计师工作中会用到)这些软件的教程,可以在搜索引擎里搜到。
或者在网店买一本带视频教学光盘的PS和AI的书籍,学习过程耗时1-2个月。
切记,在你软件基础不扎实的情况下,看任何画图标和画界面的教程都是枉然的,你也看不懂,只能徒增挫折感!基础不扎实,跟着别人教程画。就是依样画瓢,知其然不知其所以然!
学PS和AI的注意事项:
对UI来说,PS中的路径、图层效果、图层蒙版是UI最常用的功能,务必重点掌握。AI的话,也是路径操作、路径修改要重点掌握。
学完改课程后,你可试着画剪影ICON,通过加,减,交等布尔运算把图形拼出来。
再者:图标认知,图标主要是识别性
图标是对这个世界的一个隐喻,因为其国际通用性以及形、色、意比文字更有有视觉冲击力。所以,一个好的功能图标,首先要有很强的识别性,其次才是美不美,和整体UI界面是否风格相符。连功能识别性都不清的图标,只能算作一个装饰性的东西。
APP的线框图,这个呢就是一个APP应用软件的每个页面的布局结构,一般是由产品交互设计师来做线框图的。但是国外因为很多公司岗位定义不明确,所以现在很多PM产品经理在兼做产品交互,也有让GUI视觉设计师来做的。
其实,这个东西主要就是定义,功能在哪里,具体怎么跳转和应用的交互流程和框架。
品创设计UI设计流程:产品需求-产品定义-产品功能定义-技术评估-信息架构-线框布局-软件架构-数据定义-视觉设计-切图开发-上线测试-问题跟踪-问题反馈-迭代开发
第四篇:《UI设计》课程标准
《UI设计》学习领域课程标准
执笔:甄珍
审核:
时间: 2013-5-
5一、学习领域定位
“UI”热是近几年来兴起的潮流,近几年国内很多从事手机,软件,网站,增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。
正是鉴于目前UI行业的发展状况,本专业第一次开设计《UI设计》课程。
《UI设计》是所有与网络通信软件相关专业课程,该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识,还重在给学生开拓新的专业知识面,认知一个新的设计领域,从而拓展职业能力和就业选择面。
二、职业分析
目前UI即用户界面设计行业刚刚在全球软件业兴起,属于高新技术设计产业,与国外在同步发展水平。其次国内外众多大型IT企业(例如:百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门,但专业人才稀缺,人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计师的待遇和地位也逐渐上升。
三、学习目标
知识目标:使学生能熟悉UI设计的流程和设计方法,并能使用制作有创意的,充满视觉冲击力的UI设计作品。
技能目标:使学生学会系统规划和全局思维,能够完成一整套UI系统的设计。
素养目标:使学生具备能从事UI系统的开发与设计能力,培养学生团队合作、及独立思考能力。
四、学习内容
四、学习领域课程设计思路
(一)设计理念
五、考核方式
学生成绩的评定,以学生平时表现和任务完成情况及最终考核来核定。评分细则如下表:
其中,平时成绩包括平时上课的表现和各任务的完成情况,占总成绩的30%;最终考核成绩所用考核方式为机试,占总成绩的70%。
第五篇:UI设计流程
UI设计流程
阶段一:分析
1用户需求分析 2用户交互场景分析 3竞争产品分析
这两者可以说是相辅相成的。对于一个较为正规的项目而言,必然有对用户需求的分析内容。Tanjurd瑭锦资深UI设计师表示其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话,那么用户UI需求就是本次设计的出发是好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察,但是UI设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。
阶段二 设计需求:(叶面设计前需提给UI页面组)
1.系统设计需求文档。2.系统结构文档(例如栏目划分,目录结构,导航方式等)。3.较复杂页面表现形式草图(手绘或相关软件绘制)。4.较复杂业务流程文档。5.如有可能提供参考和示例站点。6.与程序员沟通部分页面实现方法。
段三:页面制作:
1.经过确认的美术设计的方案图7.系统设计需求文档等,较复杂务流程文档。2.所需页面脚本需求,与程序员沟通部分页面实现方法。3提交给程序
用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)最终得到UI的设计产品。
阶段四:验证
界面测试:(页面组提交给测试组包括:1.经确认的设计方案图。2.静态模板页面。以上二项均为便于查看嵌入程序后的叶面情况。3.常出现的界面错误:图片错误,页面不美观,布局不合理,与原先设计不符,文字 错误HTML代码错误,页面程序错误。4.界面bug测试报告:
正如Tanjurd瑭锦国际UI交互设计原则文中提到的,对于UI产品的验证主要从下面几个方面入手:
1、功能性对照UI设计的再好,和需求不一致也不可以。
2、实用性内部测试UI设计的最重要点就是实用性。
3、用户焦点小组UI设计是否优秀的重要衡量依据。最后,瑭锦Tanjurd说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开,是不可能的。
总结:
1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的,但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。
2.用户研究与分析这个过程是非常重要的,设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等,提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下,更可以制定实景用户分析。
3.架构设计这里涉及到比较多的界面交互与流程的设计,根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。
4.原型设计我觉得这里应该是一个小的阶段标志,要对前面所有工作加以设计方面的实施,根据进度与成本,可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO,它不需要有全部的功能,但要体现出设计对象的基本特性。
5.界面设计如果很倾向于图形界面设计,这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计,否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。
6.界面输出作为设计师,在这一部分的工作就是配合好开发人员完成相关的界面结合。7.完善工作这个环节是很多部门共同参与的,包括可用性的循环研究、用户体验回馈、测试回馈。同时,UI人员也应该把一些可行性建议进行完善。Tanjurd瑭锦表示很多设计师做了东西不喜欢改,这是一个大忌。
如上的流程,可能会有很多部门共同参与完成,UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师,应该能贯穿整个UI流程进行工作,而并非是单纯的图形界面设计。