个人页面ui设计教程

　　在App中，个人中心页又称为“我的”页面，通常设计在底部菜单栏的最右侧。社交应用中，个人中心有两种角色的划分，一个是自己的主页面，还有一个是他人的中心页面，自己的个人页面可以自己进行编辑，而他人的页面是供用户关注或进行私信交流的。所以，个人中心页与其他页面在功能上需要有场景区分。个人页面ui设计中最重要的是用户体验，站在用户的角度去考虑设计的合理性。
 

　　个人中心页主要由头像、个人信息和内容模块组成，通常会采用头像居中对齐的方式进行设计，目的是为了体现当前页面的信息都与本人有关。头像一般会采用圆形，因为这样看起来更为协调，同时画面也会显得更为饱满。
 

　　居中对齐的个人中心页，还有一种设计是以头像居左对齐为主，通常在信息比较多的情况下会采用这种设计，不仅能节省空间，同时也能让内容在一屏上展示完整。在社交应用中，更多的是要凸显人与人的关系，所以个人中心“关注”和“粉丝”的数量是两个非常重要的信息。设计时应该着重凸显数字，体现个人在群体中的价值。
 

　　界面作为我们认识APP的第一道门槛，是APP的“面子”，更是不可忽视的一项重点设计，为了建立有效的UI，设计师需要根据移动端APP本身的特性和当下趋势，作出不一样的改变。但当今设计趋势瞬息万变，在没有统一标准的设计规则之下，紧跟设计趋势，才能保证UI对用户的吸引力常在。常见的移动UI界面设计：
 

　　闪屏页：每次打开App时第一眼看到的就是闪屏页(又称启动页)，该页面承载了用户对这款App的第一印象，因此对设计的要求是很考究的。闪屏页给用户观看的时间很短，通常只有一秒的时间，因此，如何在这么短的时间内表达出产品的定位就是UI设计师需要重点考虑的问题。只有设计出定位明确且吸引人的闪屏页，才能加深用户对产品的认知度。闪屏页分为品牌宣传型、节假关怀型和活动推广型3种类型，不同类型的闪屏页承载的内容信息和表达方式也不一样。
 

　　1、品牌宣传型：App的闪屏页是为了体现产品的品牌而设定的，主要组成部分是“产品名称+产品形象+产品广告语”，如图所示。品牌宣传型的闪屏页是最为直白的闪屏页，设计较为精简，力求凸显品牌特点。
 

　　2、节假关怀型：当节假日来临，很多App会通过营造节假日的气氛来体现人文关怀。当眼前出现一幅朴实的节假日插图时，观者会从内心感受到软件带来的祝福，从而拥有美好的心情。QQ音乐在设计中，对品牌的LOGO进行了延展设计，以凸显节假日的元素。这种设计不仅能够加强与用户的情感交流，还能加深用户的品牌的印象。用LOGO体现假日元素的闪屏页，也可以用整个场景的插画来营造节假日的氛围，这也是非常讨喜的表现方式。
 

　　3、活动推广型：有时候产品在运营过程中会做一些活动或者广告，推广内容通常会显示在闪屏页上。活动推广型的闪屏页多以插画形式表现。要着重体现的是活动主题及时间节点，营造热闹的活动氛围。在设计时一定要抓住主次，避免因为烦琐的场景影响到主题的体现。
 

　　引导页：一个好的App引导页能够迅速抓住使用者的眼球，让他们快速了解App的价值和功能，起到很好的引导作用。有一句话是这么说的：“优秀的UI可以造就App的点击率”。在做引导页之前，我们首先要学会定位，了解App的目标用户群。简单来说，引导页分为功能介绍型、情感带入型和搞笑型3种类型。
 

　　1、功能介绍型引导页：是最基础的一种引导页。这种引导页要保证信息展示一针见血，在这样一个网络化、碎片化的时代，用户停留在引导页上的时间越来越短，浏览时间通常不会超过3秒。在这宝贵的3秒钟内，设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户。功能介绍型引导页：分为带按钮的引导页和不带按钮的引导页两种类型。一般社交类的产品会强制引导用户去登录，所以会在引导页面中加入登录的入口。
 

　　2、情感带入型引导页：通过文案和配图，把用户需求通过某种形式表现出来，引导用户去思考这个App的价值，这种类型的引导页要求设计形象化、生动化、立体化，能够增强产品的预热效果，同时给用户带来某种惊喜。
 

　　3、搞笑型引导页的阅读量一般都比较高，拼的是设计效果或动画效果。在一般情况下，这种类型的引导页对设计师的要求比较高，需要设计师学会扮角色和讲故事，综合运用拟人化和交互化的表达方式，根据目标用户的特点来进行设计，最终让用户身临其境，在页面上停留更长的时间。
 

　　浮层引导页：一般出现在功能操作提示中，是为了能够让用户在使用过程中更好地解决问题而提前设计的用户教育。种引导页的浮层通常以手绘表现方式为主，会使用箭头和圆圈来进行设计，并用高亮的颜色来突出信息，同时采用蒙版方式来加强突出功能。
 

　　列表页：在使用软件搜索或点击分类查找后会出现结果页面。结果页面通常会以列表的形式来体现，包括单行列表和双行列表两种，展示的内容为“图片+名称+介绍”。另外，还可以用时间轴和图库的形式来设计列表页。列表页的设计虽然简单，但却困扰着不少设计师。设计列表页时，留白空间要张弛有度，且要有亲疏之分;对齐的方式要规整;粗细元素的组合要有节奏感;需要重点突出的元素的颜色要明亮;列表的层次感要分明;在用虚实方式进行结合设计时，要保证实的对象在前，虚的对象在后。
 

　　时间轴：为了加强内容的前后时间关系，通常会使用时间轴的方式来设计列表页，这样的表现形式能够更好地凸显每条信息之间的关系，让用户阅读起来更有条理性，如图 所示。时间轴列表页的展示方式为左边是时间轴上各节点，右边是与时间节点对应的内容。
 

　　可输入页面：在社交软件中，注册登录页面是必不可少的，这类页面的设计务必要做到易用简便。注册登录页要考虑唤起键盘的时候文字信息会不会被遮挡，输入框的宽度是否易于操作，文字提示是不是达到最精简程度等。
 

　　注册登录页面：在发布信息内容的时候会出现相关的内容填写页面，这种页面很注重类别的分组，例如将图片分为一组，货号和批发价分为一组，将内容有条理地进行分组等。可以减少用户的填写压力，如图所示。在分类比较多的情况下，选用的背景和分割线的颜色不宜太重，否则会让页面显得琐碎不堪。
 

　　3D效果正流行：C4D大热，很多商家都使用了3D效果，有的还加上了动效，可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们，需要提升你的竞争力了。
 

　　插画风格：运用的越来越广泛，适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等，运用时要和app的整体风格搭配，有趣味、富有创意的插画会让用户对app的好感大幅提升。
 

　　交互动效越来越多的使用在ui设计中，它对于产品设计的作用包含：传递层级和状态信息，好的动效应该是隐形的，以提高可用性为前提，提升体验为目的。它的几点特性：快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果
 

　　启动页的小视频：一般小视频使用在启动页多用于第一次打开app的场景，对用户的代入感较强，能够很好的感染用户的情绪，但是视频时间不宜过长。
 

　　由动态图片转变成动态视频：一般常见于微信配图，核心是图片中有少量的动态元素，仿佛赋予图片生命，比较唯美和贴近现实。为了吸引更多用户的注意力，手机UI设计banner设计上采用了动态视频进行展现，另外淘宝商品详情页也会放置动态视频效果，方便360度的查看商品，刺激你剁手的欲望。另外一些网页的首页也会放置高质量、有故事性的视频，会让你的网站与众不同。
 

　　响应式设计：随着移动端的增长，手机已经超越了pc端作为日常浏览网站的第一选择，Google推出的MD响应式栅格系统，由于人力成本过高，国内大部分网页都没有做，国外采用响应式设计的网站有：Youtube、Spotify、Behance...国内的有京东、腾讯视频等。这种响应式设计确实比较复杂，但是这个趋势会一直继续下去，对于产品、公司而言，还是需要量力而行的进行升级。
 

　　色彩趋势：彩色渐变一直是设计趋势，设计师将大胆的渐变，饱和度更高的渐变运用在设计中去，让整体的色彩感觉，更加年轻化与活跃。
 

　　除了渐变色，大胆的单色在设计中运用也会越来越多，整个设计就一套色彩体系贯穿，大多时候以品牌色的形式去运用，配合留白，对比明显的字体，整体给人印象深刻。它的优势是色彩干净，品牌整体感强，但是对设计师驾驭页面能力也要求很高，因为大面积的单色，如果用不好就会很刺眼。
 

　　插画也是一种新的表达方式，越来越多的设计师，插画师通过插画表达产品的情绪，个人的情绪主张需要和品牌很好的融合起来。插画对于品牌来说也是非常重要的一个因素，无论在界面设计，还是在品牌营销很多场景都需要插画去营造产品氛围和气质，插画有助于将我们的品牌故事讲述给听众听，所以在构建一个品牌时候，插画是非常重要的点之一，但是做之前一定要尽量多去了解我们为客户提供的设计价值。
 

　　3D插画：随着人们的审美变化，趋势也从静态变成动态，从平面变成3D，从今年的支付宝五福设计中大家应该能感觉到2020的插画设计一定是往着3D方向，而且是动态3D方向演进的。
 

　　等距插画：未来或许和场景联系更紧密，在每年天猫双11设计中，互动城的设计每年基本都是等距插画风格，它的故事感和画面感，都能让人眼前一亮，所以电商的设计，在短时间内，大型活动场景基本都离不开这个风格。
 

　　随着内容的升级，对内容的表达也会被越来越重视，那么如何更好的把内容更生动表达出来，插画就是很好的一个形式，根据内容定制的插画，在很多产品中被运用到，互联网教育，IT等领域。插画的形态终于不再是孤零零的只是用户情感的表达，而是随着内容的升级变化，在产品中发挥的重要性也越来越大。
 

　　作为ui设计师，进行个人页面ui设计时我们需要了解设计趋势必然与技术发展紧密结合，平时就要和我们设计进行结合，在满足用户体验的同时，做好我们的设计。