App开发中的UI设计技巧

网站建设知识 phpacg 2年前 (2018-04-24) 128次浏览 0个评论

  随着App运用的普及,软件开发师越来越注重用户体验的效果。因此,在开发中必需要与前端开发、产品经理达成共识,以用户对界面的需求变化为动身点, 运用户界面的内在方式和App实践运用的外部功用都能契合不用用户的需求。

  UI设计的重要性

  UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的全体设计。假设App的开发仅限于编码开发完成必要功用,图形化的界面和复杂易用的交互式方式没有失掉表现,那么这类App将没有任何市场竞争力。所以,界面设计不只仅是复杂的美术绘画,他在艺术设计的基础上需求考量运用者的喜好、运用的环境、运用的人群特点等众多要素,最终运用者的用户体验是评价UI设计好坏的关键要素。因此,界面设计与运用人群剖析要严密结合。

  随着App运用的不时普及,具有相似功用的App运用数量单一,企业怎样才干让自身的App运用在让人美不胜收的App中崭露头角?友好的界面设计是提升用户体验的有效方法之一。一款成熟的App运用不只仅要具有适用的功用、平安的保证,还要具有令人愉悦、方便运用的用户界面。好的UI设计具有以下特点:

  1)具有友好的操作界面,能让运用者操作便捷,易上手。用户体验因人而异,但是好的用户界面一定是复杂、易用的,能引导用户顺利完成相应的操作。

  2)让App运用有自己的特性和特征,进而提高品牌的识别度。如苹果手机中的基本运用一样,具有自己鲜明的作风。

  3)能延伸App的运用寿命,让运用不得人心,提升在App市场上的竞争力。

  移动设备的特点

  与电脑相比,移动设备的屏幕要小很多,因此显示的内容要尽量坚持内容繁复。复杂直观的交互能协助用户快速地完成义务。由于移动设备的便携性,用户很有能够是在移动的环境下停止设备的操作,而无线网络通常不太不动摇,所以用户在一次屏幕更新后,应该尽量取得较多的信息,因此,显示的控件数量或有效信息也不能过少。

  不同品牌不同型号的移动设备有不同的屏幕尺寸和分辨率,在设计前需求针对不同的移动设备停止相应的测试。分辨率和像素是我们需求测试的两个必要目的。屏幕分辨率通常是对经典VGA分辨率的修正,经典VGA分辨率是640*480。如今,移入手机端最大的尺寸是800*480(WVGA)。小一点的尺寸是竖屏,大一点的尺寸是横屏。目前很多移入手机端可以改动方向。大少数移入手机端的屏幕尺寸以240*320或许QVGA为主。也有许多公司触及1920*1080的比例或许超高的明晰度。关于屏幕的像素,罕见的几个规范像素密度有:Idpi(像素密度:100dpi-140dpi)、mdpi(像素密度:140dpi-190dpi)、hdpi(像素密度:大于等于190dpi)和xhdpi(像素密度:320dpi)。

  App开发中的UI设计

  一个完整的App设计由编码设计与UI设计构成。临时以来,开发者都注重功用的开发而疏忽了UI的设计,招致很多适用性很强的App用户下载装置后不会用,或许觉得操作复杂不好用。由此,界面设计渐渐被互联网企业所注重,以为界面设计也是产品的重要卖点。

  界面的设计大致需求经过目的人群确定、用户需求调查、交互式流程设计、界面作风定位功用icon的设计、全体视觉效果的优化和运用icon的设计几个阶段。其中目的人群确定、用户需求调查和交互式流程设计需求软件开发人员和设计人员共同完成。同时,App产品的UI设计需求对相应的功用需求有明晰的掌握。由此,将界面设计的技巧总结如下:

  1)页面规划

  在开发前期停止App的原型设计,针对Android和ios制定不同的输入规范,而在页面规划时则可尽量统筹Android系统和ios系统,在前期经过微调后输入适用安卓和ios不同的尺寸要求即可。同时,针对目的人群要尽量运用用户熟习的界面作风,方便用户依照以往的运用习气来操作软件,这样更容易让用户接受。假设设计得过于另类,则能够会很难契合群众口味,而不被群众接受。

  2)颜色和字体

  合理的颜色搭配和颜色选取将直接影响整个项目的成功与否,客户的满意度等等,所以在停止美工前,要确定好App的用色规范。普通,重要的颜色不要多于3种,而在这其中又要分为:用于特别强调或许需求重点突出的文字、按钮等小面积运用的颜色;用于普通级信息、文字等信息的通用颜色;和用于标题、列表等比拟重要信息的颜色。其中用于背风景和需求弱化显示的信息要用较弱的颜色。

  针对字体也要分为重要字体、较重要字体和普通字体;依据文字信息的重要性来确定文字的字体和字号。其中重要的文字普通为大标题、导航栏;较重要的文字为二级页面小标题、栏目的题等;普通字体为普通注释文字和说明性文字。在字体字号选择时,还可以结合其相应的背风景来选择,运用颜色的搭配太突出显示或许弱化显示相应的文字。

  3)图标、按钮设计

  功用icon是在App中用来表达某一操作或许功用表示的图形,如“主页”、“设置”等功用能图标。功用图标的设计应当尽能够的笼统、繁复,力图能准确的表达其代表的功用。而针对运用icon的设计要在界面设计的最后再停止,便于让icon与全体界面的作风相婚配。同时,还需求输入不同尺寸的运用到界面上。icon设计需求创立的是一套不同尺寸的PNG文件(大小:29*29px~1024*1024px),且需求与运用捆绑。

  设计中要擅长应用图标语义引导用户行为,设计者可以用象形图形来制造图标,如日历、短信、通讯簿等;也可以用字符来制造图标,如IE阅读器、支付宝的图标;此外还可以用一些笼统的符号来隐喻要代表的运用,当目的人群重复运用和检查这些图标,会普遍认可这些符号的含义。

  4)作风的一致

  在界面设计前,要对界面停止作风定位,让界面的全体作风契合视觉流程,契合目的人群的偏好。

  第一,一致界面各个元素间的间距。注释的行间距、按钮与按钮之间的距离、栏目的题与注释之间的距离、导航与栏目之间的距离,都需求停止一致,这样能使界面整洁明晰,条理清楚。

  第二,擅长运用用圆角效果。在App运用中,通常会有按钮、弹出的信息提示框等必要元素,而这些必要元素通常会设计成各种大小不一的矩形。我们可以为矩形设计圆角效果,一致矩形的圆角像历来硬化用户界面,并构成一致作风。

  第三,适当运用光照效果。在成套的图标设计中,在弹出框的运用时,可以为这些元素添加一定的光照效果,让他们愈加平面化。但在运用光照效果时,要留意坚持光照角度的分歧性,这样才干保证元素的阴影在屏幕上的朝向是分歧的。

更多手机APP开发资讯请关注蜘蛛熊,如需转载请注明出处!

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址