(1)我们用Photoshop做设计新建画布应该设置多大呢?iOS应用中的栏,包括状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?(注意:iOS严格规定了各个栏的高度,这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。(2)目前主流的iOS设备iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的1.5倍,并分别以@3x和@2x在文件名结尾命名,程序再根据不同分辨率自动加载@3x或者@2x的切片。(3)注意:在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板,只是高度增加了290px,设计尺寸为750*1624(@2x)。注意状态栏的高度由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。
手机游戏UI界面尺寸多大
小按钮比大按钮更难于操控。当设计移动界面时,最好把可点击目标的尺寸做大一点,这样更利于用户点击。但这个“大”究竟需要多“大”,才能方便大多数用户呢?丝路教育小编相信很多移动开发者也非常想知道这个问题的答案,最后都在各平台的UI设计规范中找到了答案。
移动平台设计指导规范告诉了我们什么?
在苹果的《iPhone人机界面设计规范》中指出,最小的点击目标尺寸是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34像素的尺寸,最小也要26 x 26 像素。诺基亚开发指南中建议,目标尺寸应该不小于1cm x 1cm或者28 x 28 像素。
尽管这些指导规范给我们列举了各平台下可点击目标的尺寸标准,但是彼此的标准并不一致,更无法和人类手指的实际尺寸相一致,他们的建议尺寸比手指的平均尺寸要小,这会影响触摸屏下对于点击目标的精准度。
小的点击目标会导致大问题
可点击目标尺寸太小,对于用户体验来说就非常糟糕,因为如果要更精确的触控。用户需要调整手指的操作方式,从指心操作,变为指尖操作,这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象,让用户无法分辨他们所要操作的目标,也无法收到操作过程中的视觉反馈,也就无法知晓,他们的操作是否有效。当用户不得不用指尖进行操作时,又出现了一个新问题,这种操作方式非常的慢,而且很吃力,体验很差。
问题不仅这些,目标的尺寸过小还会导致失误的触摸操作。因为尺寸小,所以容易拥挤在一起,用户容易触碰到附近的目标,导致运行结果非用户所愿。手指太大,目标尺寸太小,一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置,就会导致错误的操作。食指容易出错,但是拇指更容易出错。因为拇指更大、更笨拙。有时候用户会倾斜拇指,使用拇指的侧边进行操作,但是目标尺寸过小,依然失误频繁。
在移动用户的日常操作中,拇指的使用非常频繁。有时用户无法腾开两只手操作,只能用一只手握住手机,用拇指和食指操作。在这种场景下,用户的操作精度有限,就需要提高目标尺寸来避免操作错误,这就是所谓的友好的触控体验。
食指操作下的平均像素宽度
MIT触摸实验室的做了一项研究,以手指指尖作为调查,分析其感觉机能。研究发现,成年人的食指宽度一般是1.6——2 cm。转换成像素就是45——57 px,这比那些指导书上建议的宽度都要宽。
45——57 px的目标尺寸非常够用,用户可以将整个手指紧贴在目标上。在操作的过程中,用户也能看到目标的边缘。这样用户与控制对象之间的反馈与信息传达变的非常清晰,用户也能知晓他们的操作是否有效。因为尺寸大,定位更快,拖移也更方便。费茨法则中提到过,目标越小,操作耗时就越长。小目标减慢了用户的操作速度,因为需要用户集中精力去精准定位。手指大小的目标则不一样,这种目标给予用户足够的空间操作,容错率也很高。
拇指操作情况下的像素宽度
也有很多用户用拇指敲击屏幕上的目标。拇指比食指要宽,平均宽度大概在2.5cm,转换成像素是72 px。
72像素的实际使用效果很棒,更容易定位、操作的舒适感更好。同样可以看到操作目标的边缘。这意味着用户不用费力的调整手指,使用指尖去操作了。也不用倾斜拇指,用拇指侧面点击目标。
在《小型触摸设备上单手操作研究:关于拇指操作的目标尺寸》这篇文章中发现,目标尺寸的增加会降低失误操作的次数。更多的空间提供了更高的容错率和更精确的操作,同时因为大型的尺寸,目标的表现力也变强。
另外一篇《移动端触摸设计:关于目标选择的关键》中也表达了同样的看法。
手指大小的目标尺寸很理想,但也有特殊情况
将目标尺寸的大小,设置为跟手指大小相近,其中的好处不再赘述。但并不是适合所有的设计场景。在移动设备上,空间有限。这就意味着,如果每个目标的大小都很大,那么屏幕空间根本不够,就需要不断的翻页,这在体验上很糟糕。你需要测量屏幕尺寸,然后计算比例,搞清楚“在这种尺寸的屏幕上,合适的、最大的目标尺寸是多少?”倘若你按照手指大小进行尺寸调整,整个界面的比例很糟糕;再次按照比例调整后,最大的目标尺寸效果也不假,那么就只能使用指导规范上的建议尺寸了。
对于平板设备来说,情况就没有手机那么复杂,因为平板的空间更多。不用害怕没有空间去放置点击目标,空间足够,你可以非常悠然的通过提高尺寸来提高操作适用性。手机是最麻烦的,点击目标的尺寸非常不好拿捏。但正是因为手机的空间有限,容易操作失误,所以才需要设置真实手指大小的目标尺寸。设计师的挑战就在于,要想办法,让屏幕上大多数的目标,尺寸都跟手指大小一致。但也有好处,这迫使设计师设计时更注重功能性、风格更加极简。
为游戏应用设计拇指大小的点击对象
我们无法推测的问题是,用户使用你的应用时,是用食指操作更多?还是用拇指更多?针对这一点,我们要非常细致的做调研,然后设置合理的目标尺寸。 如果你的应用是一款游戏的话,大多数用户会使用拇指。这就是为什么很多游戏应用中,一些控件的尺寸一般有拇指那么大,这样用户就能更稳固的双手持握,更精准的操作。
结论
通过调整目标尺寸的大小,结合实际的应用情况,能够有效的提高移动端的适用性,同时提高用户体验。不管你的应用是游戏还是别的什么。触摸屏上的目标就是用来让用户点击的。如果用户需要去想“我该怎样去点击,才能完成精确的操作”,需要再交互前思考方法,需要调整操作方法,使用多种方法才能完成交互。这说明这款产品的交互设计是糟糕的。在这篇文章里,我抛出了个人的一些观点,在触摸即将成为操作方式的一统时代,如何打造友好的触控体验?这是我们将要面临的问题。期待更多的想法,以及更规范的标准。
感谢阅读!
看完这篇丝路提醒你只要记住2点,食指点击目标尺寸是44 x 44像素,拇指是72 x72像素。所以在画界面的时候,要注意这2个尺寸。
小技巧:在导出ICON的时候,假如你的ICON实际尺寸是32×32,那么你可以导出50x50PNG透明背景的ICON,重点是加了透明区域。这样就更方便点击了。
手机游戏UI界面尺寸是多少
UI设计的主要工作内容
UI设计的分类:
用户界面设计又分为三个职位,分别是用户体验设计师、交互设计师和界面设计师。我们常说的学UI设计或做UI设计,一般都指GUI界面设计师。GUI设计师的日常工作就是界面设计、图标设计、切图和标注。所用工具为PS、AI、AE、C4D(非必需)等,还有切图和标注的一些插件或软件。GUI设计师的就业方向分为主题UI设计师和APP UI设计师。
APP UI自然就是手机软件界面设计,我们平日所用的微信、QQ、淘宝、支付宝等这些全都属于APP,他们的界面自然也都是UI设计师所设计的。手机应用种类繁多,安卓和苹果商城几乎都有数十万甚至百万个,这自然就需要大量的UI设计师了。
ID(交互设计师)一般的工作是设计、绘制原型图,它对逻辑处理能力和页面布局能力要求较高,很多工业设计出身的人比较适合这个行业。
UE(用户体验设计师)这个职位一般只有中大型公司才有,顾名思义,它主要是研究用户体验的,用户的行为,情感,使用感受、使用过程等所有方面都需要进行研究,心理学专业出身的人可以考虑这个行业。
UI设计的工作内容:
具还包括:可用性分析、GUI(Graphic User Interface即图形用户界面设计、用户测试等。好的UI设计不只是让软件变得有个性有品味而已,更重要的是让软件的操作变得舒适、简单、易用,并且充分体现软件的定位和特点。
UI设计师的工作流程:
1、在设计之前,首先需要产品经理确定好客户或者老板的需求。
2、确定需求之后,产品经理会做具体的说明,让交互、UI、开发、测试明确产品需求,明确项目的具体细节。
3、设计组内部会议、界面风格确定。这个时候需要确定一个设计负责人。设计负责人会给同事做具体的工作安排,线框图标、版式设计等都有具体的分配。
4、分工已经明确,进行具体设计工作。
5、标注图、效果图、切图。这个步骤,产品经理会进行把关。
6、开发完成,进行最后的测试。测试工程师会对开发出来的产品进行测试,看看有没有疏漏,有没有错误,当测试和调试完成,上线,就完成了整个开发的流程。
现在企业对于UI设计师的需求也越来越多,之前只会一个单一的移动端APP界面设计都能找到一份很不错的工作,但是现在企业需要变多所以我们需要学习的内容也增多了,之后就得学习运营设计,网页界面设计,交互动效设计,小程序设计,插画设计等等。
如果是现在只会一个移动端APP设计找工作就比较难的,所以我们就需要不断的学习,充实自己,提升自己的能力,不然很容易就被这个社会淘汰了。
那么我们接下来了解一下现在学习UI设计需要会哪些设计能力?
我们第一个要掌握的能力就是软件技法能力
我们在学习UI设计的过程当中,需要学习到很多知识,比如 PS,AI,AE,XD,ARP,C4D,蓝湖,默刀软件,这些都是一名UI设计必需要掌握好的软件。而学习到这些软件,可以通过视视频,书籍,网站等多种方法学习。
工欲善其事必先利其器,从这个阶段开始,觉得先学习软件工具了,一般UI设计要学习有以下8款软件(PS,AI,AE,XD,ARP,C4D,蓝湖,默刀软件)那么这几款软件在UI设计工作是负责什么的呢?
PS:PS软件在UI设计工作中主要来用做UI设计界面设计、图标设计、图片处理的
AI:AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计的
AE:AE软件在UI设计工作中主要用来做动效设计的
XD:XD或者sketch软件,Sketch(只能在苹果电脑上安装)XD软件可以在双系统上安装
Sketch和XD这两款软件功能是差不多的,XD的话是一款非常适合做UI设计工作,XD做图会非常快,因为XD的工具特别少,里面的工具是专门为做UI设计工作开发的一款软件,而且XD软件特别小,不会卡。
ARP:ARP或者默刀软件,ARP和默刀软件功能差不多二选一学习就可以了,这两款软件都是做原型设计的
UI设计是由很多很多界面组成的,这些界面每一步之间去交接的这个界面,如果说我们只做一个界面,UI设计师是可以做出来的,但是要做几十个上面个界面,如果我们一个个做是肯定会出问题的,所以需要先制作原型,我们根据原型再制作界面,这就是我们的前后联系,原型是不用做这个颜色,图标,细节的,只需搭建一个基础的版式就行,这个就是我们用ARP或者默刀软件做的。
C4D:C4D软件在UI设计工作中主要用来做建模的
蓝湖:蓝湖软件在UI设计工作中主要用来做标注设计的
就是我们做好了页面,这个页面的高底,宽度,包括页面的色值我们都需要标注出来,为什么需要标注呢,因为我们做的图,做完之后他就是张图片,这个图片我们用手机是点不了的,我们手机APP上的那些图之所以能点,那是因为有程序猿做了一个二次开发,这个东西我们不用懂,但是我们要标注出来,标注出来让程序猿知道你的颜色,你的色值,你的尺寸到时是多少,他才能开发出来。
那么除了软件技法之外我们还需要会哪能力?我们可以用软件做一些图,但是呢软件只是个工具,我们还需要会设计
设计包含了:图标设计,界面设计,动效设计,交互设计,运营设计,插画设计,平面设计,作品集设计,小程序设计
图标设计:手机及电脑上的界面里面的图标
界面设计:手机APP界面和电脑上的界面
动效设计:动效设计可能很多人没有留意过,但是动效设计是非常非常重要的,只要是页面切换效果都属于动效设计
交互设计:交互设计要做的就是原型图设计
UI设计师的职业发展:
设计学完后就业方向非常广,除了美工,可以做webUI设计师、移动端UI设计师、平面设计师、产品经理等很多方向。图形设计师,它不仅仅是单纯意义上的美术工人,而是了解软件产品、致力于提高软件用户体验的产品外形设计师,例如工业外形设计、装潢设计、信息多媒体设计等;交互设计师,设计软件的操作流程、树状结构、软件的结构与操作规范等;用户测试/研究工程师,主要测试交互设计的合理性以及图形设计的美观性,通常采用户外问卷的形式来衡量UI设计的合理性。学习UI设计就业方向非常广,可以给子自己很多不同的工作选择。
UI设计师的主要工作内容就是设计出能够满足用户需求的界面设计。这需要设计师既要有扎实的设计功底,又要懂得一些基础的软件开发知识,和前端知识等等。因此传统的设计师比较起来,UI设计师在当今社会需求量更大。