APP设计规范之界面设计

标题:APP设计规范之界面设计中文摘要随着互联网时代的进步，移动设备作为人们生活娱乐不可缺少的产品之一，而产品设备的用户界面和用户体验更多的受到用户的关注，APP界面设计、用户体验就显得尤为重要。关键词：界面设计，设计原则，GUI，品牌色目录绪论…………………1一、APP设计规范的基本原则……………………2（一）设计规范的视觉设计……………………21．色彩……………………22．布局……………………33．字体排版………………34．图标样式………………3（二）设计规范的4大原则………4二、界面设计基础…………………4（一）界面设计的初期调研……………………41．需求分析………………42．市场调研………………53．竞品分析………………5（二）界面设计的品牌色推导…………………5（三）界面设计的用户群体……………………6（四）界面设计的布局规划……………………61．初始页面的布局设计…………………62．应用界面的结构设计…………………73．图标的设计规划………7结论…………………8参考文献……………9注：1．一般列两级标题。单倍行距。亦可采取三级标题形式。2．目录正文用小四号宋体。PAGE3绪论随着互联网时代的进步，移动设备作为人们生活娱乐不可缺少的产品之一，而产品设备的用户界面和用户体验更多的受到用户的关注，现代化智能手机设备在人们生活中越来越普及，人们对使用APP客户端浏览信息的方式渐渐的习惯了，就当今各大电商平台、新闻资讯、学习平台、金融借贷产品等，都拥有了属于自己产品特色的APP客户端，这样就标志着，APP移动客户端越来越商业化，已经开始带领着整个互联网时代发展。这样的发展更大的方便了我们的办公、学习、娱乐消遣等，智能手机设备的小巧更加携带方便，受到大众所喜爱，不分年龄。所以对于APP界面设计、用户体验就显得尤为重要，相似的产品越来越多，想有自己特比的产品，就必须在设计及交互上面有新颖，以便吸引更多的用户体验自己的产品。一、APP设计规范的基本原则（一）设计规范的视觉设计俗话说：无规矩，不成方圆。APP设计也一样，拥有自己的一套设计规范，想让设计具有统一性一套系统建议的规范是必须的，这样会让界面视觉上更加的美观。想要高效顺利地完成一项设计项目，就必须遵守APP的一系列设计规范。在设计一套用户产品界面时，有必要建立一个详细的独立系统。作为一名设计师，我们时常会跨越一些不同的专业领域：产品用户体验（UX），在考虑信息架构（IA）的同时也要针对逻辑问题组织信息，同时也要考虑用户界面（UI）的整体设计风格。只有先了解了重要性的用户需求，同时也考虑了用户体验过程，考虑到用户行为的设计需求以及整体设计的美学程度。而在界面设计的这个过程所得到的目标是通过以下方式将所学到的知识应用到用户产品的界面设计中：使用基准测试开发界面清单，确保以一致和一致的方式考虑用户界面;根据所列出的界面清单建立模式库，以确保在产品设计的内容具有成本效益和一致性; 将交互体验作为与用户沟通的一种方式，运用设计规范的理论依据在功能和主要的设计层面上改进设计，以吸引更多的用户。设计规范的视觉设计，也称为GUI，主要从四个层面进行阐述：色彩、布局、字体排版、图标样式，这四个层面也是设计一款产品必备的组成元素。l.色彩设计规范色彩体系分成两个层面：系统级色彩体系和产品级色彩体系（也就是品牌色）。系统级色彩体系主要是设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性风格以及功能诉求的颜色。系统级色彩体系其实是来源于『自然』的设计价值观。通过对自然场景的抽象捕捉，结合系统的技术基因，形成了特有的12色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对12个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。基础色板共计120个颜色，包含12个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。系统的中性色板一共包含了从白到黑的10个颜色。数据可视化色板是在基础色板以及中性色板的基础上，融合『有效、清晰、准确、美』的原则产生的。产品级色彩体系包含品牌色、功能色和中性色。品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。2.布局空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索UI设计中的动态空间秩序，形成了设计规范的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。3.字体排版字体是体系化界面设计中最基本的构成之一。我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。设计规范的字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：字体家族、主字体、字阶与行高、字重、字体颜色4.图标样式图标是UI设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。设计规范相信一整套优质的图标对于设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。（二）设计规范的4大原则其实就是对比、对齐、亲密、重复，对比：对比就是元素之间差生的差异化，比如大小、颜色、字体元素等，对齐：对齐就比较好理解，能让各元素之间更加的整齐一致，亲密：亲密其实就是远近距离，元素之间的间距保持恰当，能让页面显得很有层次感，重复：对于重复的使用大家也要注意，特别是设计感比较强的PPT，其元素一定要保持重复，否则页面会显得很凌乱。二、界面设计基础（一）界面设计的初期调研不管设计什么产品，在设计之前就应该先想好设计的主题，对目标用户做好需求分析，做好市场调研，并针对相关产品做好竟品分析，以做到与其他产品的不同之处，吸引跟多的用户。而产品主题的确立与产品的功能与目的有关联。比如一款租房类的APP产品，它的主题就是围绕“租房流程及房源管理”，学习类的产品主题就是“学习方式方法”。界面的设计就要围绕着整个产品的主题来进行，使用户一眼就能辨认这个产品是做什么的，不能产品界面和主题风格相差甚远，例如一款学习类的APP产品界面尽是和产品主题无关紧要的，如界面设计成金融类的界面，这样就不能反应该产品的主题与功能，让人迷茫不知所措，这样的设计是失败的。所以界面设计的前期调研很重要，可以明确产品的方向定位，了解目标用户的需求，针对用户所喜欢的风格进行设计，这样的产品至少不会让用户反感，就是一款好的产品。l.需求分析需求的决策由三种最基本的因素考虑，分别是产品定位、战略定位、用户需求。这三者是一个层级的关系，战略定位决定了产品的定位，个别公司的产品在战略上仅仅需要有如此的一个产品，也仅仅是需要有，有这个产品并并不代表就非要把它做好，但是既然前期并不想做好，也就不会投入很多的资金，更不会有产品迭代的需求了，总之产品战略定位是最主要的决策因素。接下来是产品的定位，首先产品定位决定了哪些是重要的需求，哪些需求是不需要的，同比也会直接影响着用户对产品需求的留与舍。鉴于以上三大需求因素，先对需求进行一次筛选，接着在按照需要进行对号入座，就算使用用“四象限定位法”进行需求对号，也得将需求划分成“重要又急需、重要但不急需、不重要但急需、不重要也不急需”。分类好之后，再对产品的需求进行级别的划分，也就是常说的优先级，优先等级分别标注产品需求，再进行规划接着执行需求计划。针对需求分析需要明确几个问题，这个产品的目标用户是谁？他们的年龄段及喜好是什么样的？产品中最主要的场景是什么？在这个场景之下，要给用户解决什么问题？该怎么解决这些问题？确定我的思路能解决这个问题之后，重新审视这个场景的强度、频次是否足够高？只有针对性的解决不同客户的不同需求，强大的产品信息能够给客户更加快捷的找到理想信息才是最重要的。产品的需求分析，首先要知道在产品实现过程中属于哪个流程。不论是新的产品设计还是已有的迭代产品设计，首先都是先有想法再产生产品的需求，再将新的需求汇总分析，摒弃掉不需要的，延缓不着急的，最后再整理出接下来需要执行的，最终凝聚成产品需求文档并实行。在汇总分析产品之前，来自各个方面的需求不约而同的产生，每个人都可以把不不同的想法阐述表达给产品经理，这样就产生了产品的需求，最主要的是来之公司各个部门领导、开发同事、产品经理还包括其他的客户伙伴等。通过所有人对产品的梳理总结，我们可以清楚明白的认识到，产品需求的分析在实际上意义上指的就是需求的决策。无论是夹杂了自己的想法创造，还是通过市场分析调研得出的结论，再或者是来源于其他方面的不同需求，最终汇集在产品经理手上的产品需求分析，其实就是要决策出哪些是要做的、为什么要这么做、到底该怎么做，同时也将其他的比如哪些需求是不能做的、哪些需求是需要暂缓在开始做的、为什么这些需求不能做或者得延缓。在产品需求分析之前设计师要先对所有的需求进行统一分类，各个公司或产品都有自己不同的分类方法，常规的有产品功能类、产品数据类、产品运营类、用户体验类、界面设计类等等，将所有的需求分类完以后在对整个产品的总的需求进行主次考虑在进行最后的决策。2.市场调研通过调研了解市场需求、确定目标用户、确定产品的核心问题。问卷调查、用户AB测试、网上有奖调查。做人物角色分析：设置用户场景、用户角色进行产品模拟分析。3.竞品分析对比多个竞品之间相似的主打功能，结合场景，深刻体验和总结这些功能实际效果。对比分析竞品的内容浏览体验，重点关注其质量和风格。根据竞品设定产品方向，根据需要作出分析。（二）界面设计的品牌色推导何为品牌？所谓的品牌就是消费者对企业的一种感知或者说是一组关联。这些想法看法基本都是来源于企业讲述的关于自己产品的业务故事或者公司愿景，企业所持有的价值观和提供的产品及服务，以及消费者或者客户如何因为使用了企业所提供的产品或者服务而进行的转型。所以企业开发一款产品呢需要很深的含义，既要阐明企业的品牌文化，接着将这些文化消息转型为消费者可以与企业的相关产品业务进行交互沟通的渠道。而创建品牌需要很深的研究，头脑风暴，客观数据，以及对企业产品业务的清楚的愿景，最终品牌指导着并推动整个产品组织的每一项重大决策。而品牌代表着整个企业，品牌色也是其中最重要的一部分。所谓的品牌色就是体现企业产品的特点和传播整个企业产品理念最为直观的视觉元素之一。所以在色彩选择的时侯，需要先确认品牌色是否能代表整个企业的文化及形象，并且考虑在整个产品界面中的使用场景及范围。在基础色板中选择主色，选择色板从浅自深的第六个颜色作为主色更为稳妥，品牌色的选择不能过于深沉，也不能过于轻浮，选中间的颜色更为恰当。品牌色的选取场景应考虑几个地方：关键行动点，操作状态、重要信息高亮，图形化等场景。（三）界面设计的用户群体用户群体原本的含义指的是每一个互联网产品都是给特定的用户目标群体服务的，尤其是产品初期调研的时候一定要有一个精准的瞄准真正用户的一个时期。所以在设计一款产品的前期必须要明确用户群体是什么年龄段，什么阶层的，产品的界面设计要怎么去符合这些用户群体的风格爱好，只有抓住用户的心里，才能做到完美的界面设计。

举一个很实际的案例，比如说微信在初期的时候产品定义的用户群体就是白领阶层的，而微信从白领阶层开始慢慢的起步，再一步步的延伸到普通的上班族，最后再延伸到学生甚至于全中国80%有移动智能设别的用户，到现在越来越来的中老年人也加入到了这个行列，但是从始至终，微信的整个产品设计都是很简洁的，符合所有人的风格特性，界面设计也是采用简单风格，可以让任何人都能很快的适应。

所以产品的共同点都是从一个精准的用户群体出发，最后选择成横向或者纵向延伸的方向发展，慢慢的一步步的再拓展出更多的用户群体，最终一步步的占领了更大的市场。而产品在最初始状态的时候都是要维持高度聚集用户群体的。聚集一批用户群体是产品研发初期最最重要的事情，而最失败的无异于没有明确用户群体定位的产品，盲目的研发出的产品是没有任何意义的，也是最失败的。即使是聚集了同一个目标群体，只要是能够延伸出发展不同的定位和方向的产品，也是能够获得比较不错的结果，这样的产品也是可以慢慢发展的更好的。一款成功的产品最重要的就是有多少人在使用，使用的流量是多少，所以用户群体就成了一款成功产品的必备因素，而用户群体原理说明：选择和聚集一个用户群体，永远比没有任何定位的要好太多了。最后，我们会发现那些特殊出众的人，往往是有人多喜欢，也就有人多讨厌，每个人都有自己的审美定位，最终对产品的审美定义也是不同的。要想做一款成功的产品，要接受消费者对产品的赞美，更要勇于承担消费着对产品的讨厌，无论如何想要让更多的用户群里使用自己的产品，首当其冲的就是界面设计的美观，因为人类都是视觉动物，只有视觉上的效果满足人们的审美，乐意使用这款产品，这才是抓住了更多的用户。（四）界面设计的布局规划l.初始页面的布局设计所谓初始页面也就是引导页，就是指引用户如何学习了解APP的用法或者是了解APP页面的内容，主要核心问题在于“指引”二字。若初始页面的设计无法引导用户掌握APP产品的用法，或者不了解这款产品的业务功能，都不能算是真正意义上的初始引导页。为什么要设计初始页面呢，有什么意义呢，我认为设计初始页面的原因有：a、APP是新型的互联网的产物，基于传统的网页时代，用户还不是很明确该如何使用并操作app，而对于新型的APP使用说明书就太麻烦了，会让用户失去体验的兴趣，所以设计引导页就是为了减轻用户的学习成本。b、现在流行的引导页已经有最初文字的提示改成了使用设计感很强的插画风的形式，这样的图文结合的方式会更吸引用户，让用户有兴趣了解这款产品的意义所在。c、设计引导页也是希望用户能了解这个产品到底是干什么的，能干什么，可以让用户得到些什么，该怎么使用，所以要用引导页来吸引用户，来解答用户心中的疑虑问题。那么下个问题就来了，该如何设计初始页面，该怎么布局才能更好的吸引用户呢，在设计之前要先考虑几点：a、要结合整个产品的调性，要融入企业的品牌文化，使用符合企业产品的品牌色。产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。b、要根据用户群体的需求及爱好风格，这样才能吸引更多相同爱好的用户。营造出具有浓烈感情色彩的场景，唤起用户心底的情绪，让用户产生对产品的共鸣。当产品附加了感情的元素，产品就会让用户形成一种情感上的联系，用户对产品的好感也会增加。通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。c、设计风格要简洁明了，能让用户一目了然指导想表达的含义。4、文案要简明扼要，突出产品的核心内容。精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。设计引导页有很多的方式，不过总体来讲，大致可以分为几种：a、介绍功能型：主要是从整体上采用直接了当的方式叙述介绍app具备的特有功能，帮助用户能大致了解app的特性及整体概况。b、说明使用型：对于产品具体的功能该如何使用进行简单的说明，可以在用户使用app产品时进行引导c、叙述故事型：叙述故事的意义在于建立与用户使用情境相融合的场景，可以让用户建立一种很熟悉的感觉，让用户可以感同身受产品指引的功能点。讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。如果完全建立不起关联，很容易让用户忽略。2.应用界面的结构设计APP首页和网站首页一样，需要告知用户“我”(APP)是谁，“我”(APP)能为“你”(用户)提供什么服务、内容、产品…“你”(用户)能够通过“我”(APP)提供的服务、内容达到什么样的目的。不同APP类型，首页设计也是因平台而异的。比如内容资讯类的APP，多数在首页采用无限加载的形式，通过个性化的内容推荐，吸引用户深度阅读、评论互动、分享转发...总之，要增加用户停留时间；高频使用的工具类APP，首页大多就是主要功能界面或突出功能Action，简单直接，用完即走...核心栏目中都有用户关心且和自己息息相关的数据，如果散落在各个栏目中，层级较深，也势必会增加用户操作成本，因此想将这些信息更扁平化的集中呈现。初步考虑，会