12个关于用户体验的界面设计细节

点击上方"工信商务培训学校"↑文章列举了一些界面设计中的案例细节,希望对产品设计工作有所帮助。UI设计工作中,设计师们往往不喜欢将界面设计得与原型图一致,总会刻意的去寻求存在感与原型做出差别,那么对于UI设计师来说,更应该懂得用户体验,成为办个用户体验设计师。以下列举了一些界面设计中的案例细节,希望对设计师们有所帮助。一.图标1.统一图标的样式图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定...

12个关于用户体验的界面设计细节 点击上方"工信商务培训学校"


  文章列举了一些界面设计中的案例细节,希望对产品设计工作有所帮助。

  

12个关于用户体验的界面设计细节

 

  UI设计工作中,设计师们往往不喜欢将界面设计得与原型图一致,总会刻意的去寻求存在感与原型做出差别,那么对于UI设计师来说,更应该懂得用户体验,成为办个用户体验设计师。

  以下列举了一些界面设计中的案例细节,希望对设计师们有所帮助。

  一.图标

  1.统一图标的样式

  

12个关于用户体验的界面设计细节

 

  图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定的提示作用。图标风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

  在决定使用某一风格的图标设计之后,在相同木块下,请尽量使用同一的风格的图标,如填充图标的色彩饱和度;线性图标的线条粗细;拟物风格的光线阴影等。

  2.意义明确的图标

  

12个关于用户体验的界面设计细节

 

  很多人都喜欢纯图标式的设计,去掉文案试图让图标看起来更高大上,但是往往忽略了图标最重要的作用是提示用户该按钮的功能。如上图所示,去掉文案之后很多图标根本无法准确表达出确切的含义,这也是图形的缺陷。

  做好图标和文字的排版与比例一样可以设计出好看的界面。

  3.图标的视觉平衡

  

12个关于用户体验的界面设计细节

 

  同一个界面出现多个图标时,我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡也不相同,例如相同尺寸的正方形会比圆形显得大。因此,我们需要根据图标的体量对其大小做出相应的调整。

  4.符合用户心理的图标(按钮)

  

12个关于用户体验的界面设计细节

 

  图标在大多数情况下都是充当着按钮的作用。设计时必须要清晰准确的传达出当前状态,不能为了视觉效果而带给用户错误的判断,例如深灰色的按钮用户会理解为是禁用状态而放弃点击。

  通过图标(按钮)的颜色、大小、风格等来引导用户进行操作,需要强化的就要做得突出,不要整个界面都处于主次不明的状态,分散用户的注意力,削弱了界面需要传达的主旨。

  二.布局

  1.合理的模块区分

  

12个关于用户体验的界面设计细节

 

  界面设计中不乏内容信息很多,需要折叠的情况。因此经常存在信息的层级关系,而这时就需要利用不同的颜色对各个模块进行区分,利用同色系不同明度来体现这样的层级关系。这样也让用户更容易理解当前所处的模块。也让页面看起来更丰满些。

  2.正确的文字层级关系

  

12个关于用户体验的界面设计细节

 

  工作中我们拿到的需求总会出现大篇幅的文案,不能像概念设计那样任性的删减,在进行文字排版的时候,正确的处理信息之间的层级关系将会提高用户对信息的识别度。我们通常会通过字体大小、颜色、留白、层级分割等技巧来处理,把相同属性的信息归类设计,通过留白的不同达到层级的区分,让整个信息排列主次分明,层级清晰。

  3.合理的内容归纳

  

12个关于用户体验的界面设计细节

 

  应该善用色块和分割线对页面的内容进行合理的归纳和整理。线条通常用于分割同一类别或拥有相同属性的元素;而色块更多的是用于分割不同类别或者区分不同属性的元 素,以达到层次清晰,归类明确的目的。但是所有的一切都应该服务于信息的准确表达,切忌不可为了视觉上的协调而强行的合并或折叠。

  4.预估内容承载范围

  

12个关于用户体验的界面设计细节

 

  新人总是会忘记规范信息呈现的边界宽度。程序在开发的时候总会问,你这个超过长度之后如何显示。有一些程序更是直接用右图的”…”显示。但是在这样的情况下,作为地址这样的简单信息的展示,还需要用户去点击一次才能看见全部地址,明显是不合理的交互。因此我们在设计界面应该要考虑到超过展示边界的时候该如何展示,如何取舍。

  5.尊重App用户的使用习惯

  

12个关于用户体验的界面设计细节

 

  许多App的设计师都是由网页设计师转行而来的,但是App界面有其特殊性。它界面小,过小的按钮无法像鼠标一样能够精确点击。因为有一些网页的设计习惯不应该带到App的设计中来,这也是交互设计师在App的设计过程中需要去把关和注意的。

  三.设计元素

  1.颜色

  

12个关于用户体验的界面设计细节

 

  页面信息总是各有权重。在选用配色方案的时候,在界面中最好不要使用3个以上的颜色。最好能以一个主色+两个辅色最佳。颜色太多会让用户模糊界面的焦点。无法聚焦在我们想让用户聚焦的信息上。

  2.透明度与投影

  

12个关于用户体验的界面设计细节

 

  通过对按钮、卡片等进行投影运用可以增强立体感与层次感。

  给予用户该卡片能够切换,且当前展示的信息为该卡片的详情的交互暗示。虽然不加投影和阴影也能达到这个效果,但是效果会弱不少。

  3.表单

  

12个关于用户体验的界面设计细节

 

  表单设计在界面中随处可见,看到一望无际的表单用户总是望而却步。为了缓解用户的这种心理活动,我们设计的时候通常会通过合并归纳相同属性的表单,采用逐步填写来让用户感觉内容很少,通过这样的视错觉让用户完成表单的填写。

  4.缺省页

  

12个关于用户体验的界面设计细节

 

  作为用户当遇到页面内容为空的时候本身就是一件比较沮丧的事情。因为应该加入一些情感化的设计。在空界面的一些设计中也由以前的纯文字转变为一些应景的插画表现,带给用户更多的愉悦感。

声明:该文章版权归原作者所有,如涉及作品内容及版权问题,请及时联系我们删除。

12个关于用户体验的界面设计细节

12个关于用户体验的界面设计细节

济宁市工信商务职业培训学校属于山东著名的山东中煤工矿物资集团有限公司,始建于2001年。中煤集团是工信部电子商务示范企业、中国电子商务企业信用等级AAA级信用企业、中国互联网企业信用等级AAA信用企业、山东省电子商务认定企业、山东省电子商务示范企业、山东省电子商务示范园区、济宁市电子商务协会会长单位、济宁市首批科技型“小巨人”企业、济宁市高校毕业生就业见习基地等


12个关于用户体验的界面设计细节


·网络营销推广

·新媒体营销

·电子商务

·网络营销文案与策划

·网络营销项目实训与就业指导

·SEM搜索引

联系我们

电话:400-068-0537
地址:山东省济宁市高新区开源路北11号
官网:www.gongxinsw.com
邮箱:zhongmeigk@163.com

12个关于用户体验的界面设计细节

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36262/

(0)
交互精选交互精选
上一篇 2018-04-05
下一篇 2018-04-06

相关推荐

  • 在007里的用户体验是“爽”还是“不爽”

    有一天在微信上和007社群的班级一位同学聊天,一通天南海北的乱扯后,话题就回到007这个社群上了,因为这段时间我参与007社群的一些活动,对这个话题特别敏感,然而他却流露出对这个社群的很多不满意,我们之间的一段对话让我思考了很久很久。对了,这两天你看了你们小组的信息了吗?小组信息?刚看,不过我最近在考虑要不要直接退出007,感觉没意思,也啥时间整这些了。那你当初为啥参加007啊?没啥,就是觉得应该养成一个写作的习惯以及可以认识一些稍微志...

    2018-04-11
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • 用格式塔原理增强用户体验

    来源:简书用户 cherri二哈(授权发布)心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。什么是格式塔原则?格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在...

    2018-04-11
  • UED中国最美民宿大奖十强榜单揭晓

    你的内心是否有一种渴望,在纷杂忙乱的都市生活之后,去放松身心,亲近自然?你会向往自由的空气与水,向往与有趣的人们相遇,你会需要一个有温度的空间,让你做回真正的自己。从山间居所到林中小屋,从海边美宿到都市一隅,最美民宿,它们的美只为打动你。它们或许承载着美丽的风景,或许被美好的人们所赋予的生活填满,又或者发生着许多奇妙的故事;它们也许出自专业的设计师之手,又或许是来自对生活有理想的人们坚韧而温柔的初心;它们在江南、在大理、在北京........

    2018-02-01
  • AxureUX信息化精美简历模板完整版正式发布

    01作品信息作品名称:AxureUX信息化精美简历模板完整版作品类型:模板类发布日期:2018-03-12最新版本:v1.0主要适用:其它软件版本:Axure 8.0文件大小:5.6MB作品编号:OTH002作品售价:¥69.00详细介绍及演示:http://www.axureux.com/home/ResumeTemplatePro.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品是...

    2018-03-12
  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06