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

相关推荐

  • 智能语音交互设计 1 — 总览篇

    大家好,从本周开始会进行Conversational AI Design Newsletter编写。希望把一些现有的语音交互的研究成果和一些关于Conversational AI的方法收集起来分享给大家。source: Pinterest第一篇 — 总览篇语音助手(Voice Assistant)主要由几种重要的技术组成:自动语音识别系统(ASR),自然语言处理(NLU),和机器学习(Machine Learning)。ASR类似于我们...

    2018-02-05
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • 【素描Sketch】细节之处韵匠心

    ( 本宣传资料仅为要约邀请,部分图片源于网络,如有侵权请联系删除,所载全部内容仅供参考均不构成要约,一切以政府批准文件与开发商签订的《重庆市商品房买卖合同》及其附件约定为准。周边已规划及/或已建成及/或规划中及/或建设中的公共设施(包括但不限于变电站、加油站、明渠、高压线、轨道环线、商业中心、学校、公园、酒店、医院等)及规划用地,均以政府有关部门最终核准及审批文件为准。南岸区融侨半岛融侨城二期C区(营销推广名:金辉耀江府),开发商:重庆...

    2018-03-14
  • 便宜的指纹锁也会有“便宜”的用户体验

    欢迎关注:CDTV-1周一至周五晚7:30—7:40全国首创电视融商节目《天天橙掌柜》。很多指纹锁在你跟老板杀完价的那一刻是开心的用的时候并不是那么开心的例如说:外观掉漆脱落了把手松动了指纹录不进或不好打开了说好的密码备用关键时刻掉链子了配的机械钥匙太low了电池没过多久就没电了指纹锁没用多久就得找师傅上门维修了等等等等,烦心吗?趁着特价,换吧智能门锁吧超B级锁芯多种开门方式让你的生活更省心省力橙掌柜家庭安全节德施曼小嘀S8云智能门锁只...

    2018-03-09
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • 【用户体验】机器人教练:第三季!

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

    2018-04-23
  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • Sketchfab可在引擎内直接搜索3D模型,太方便了!

    点击上方蓝字CG世界关注CG我们“ 感知CG · 感触创意 · 感受艺术 · 感悟心灵 ”中国最具影响力CG领域自媒体Sketchfab为其在线模型共享平台发布了新的下载API,使开发人员能够将Sketchfab内容直接导入其他应用程序或游戏引擎中。Sketchfab是一个集发布,分享,发现,购买和销售为一体的3D,VR和AR内容的平台。 提供基于WebGL和WebVR技术的查看器,允许在网络上显示3D模型,以便可以在任何移动浏览器,桌...

    2018-03-31
  • 阿里国际UED小二亲授“有效”视觉传达 — 新零售时代,打好2018年内容营销的开局基础!

    如今商业已经进入新零售时代,流量红利已经过去。要让消费者感兴趣并购买商品,不能再靠简简单单堆叠商品信息和低价促销吸引消费者,而是要在内容上精耕细作,达到信息的有效传达。而人获取的信息八成是来自于“视觉”,所以可想而知,在如今内容爆炸的时代,视觉营销能有效帮助商业提升转换效果,成就更好的销售额。阿里巴巴国际ued团队欣频据第三方预测,2018年,84%的营销内容都是以视觉图像的方式来呈现。我的个人观点,未来品牌的视觉营销会呈现情感化、个性...

    2018-01-31
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21