UI设计中个人页面设计攻略

　　最近刚做完一个项目，我发现我的设计效率相比之前竟然提升了30%以上，在以前做界面时总是会纠结采用什么样式，什么布局。而现在再看了原型之后就大概知道我要怎么做了，没有了以前做页面时的纠结，效率自然提升了。

　　我想着主要是因为平时长期的分析总结的结果，我能够很明确的知道什么时候该用什么交互方式，什么时候该用什么样式。因此今天我就针对UI设计中个人页面设计攻略进行简单的说明。

　　一、个人中心是什么?

　　个人中心是APP中所有功能点的集合入口，在这里可以查看个人资料、个人相关信息、以及其他相关功能界面等。

　　在应用中一般有两种界面我们需要分清楚，那就是个人中心和个人主页的区别，个人中心是个人信息和功能的集合入口，我们通常叫“我的”，只有用户自己能看到;而个人主页展示我发布的动态等，其他人可以看到。而今天我们要分析功能较为复杂的个人中心页面。

　　二、个人中心设计的目的

　　1、个人信息的展示(让用户进来就知道这是我的个人中心，而不是张三或李四的。

　　2、功能入口设计(功能入口可是个人中心页面主模块，清晰的展现方式可以帮助用户高效实用

　　3、突出核心功能入口(突出核心功能入口，比如电商APP中我的订单是用户常用入口，因此该模块需要将其突出设计，拉开和其他功能入口的差异，帮助用户快速操作。

　　个人信息区

　　个人信息区相当于是一个定位，用户进来首先需要看到的个人信息，其优先级最高，因此常常放在界面的开头。由于该界面的主要作用是强调功能入口和突出重要功能，因此不会使用大量的面积来对头部进行设计。

　　同时用很小的区域来展示头像信息，因此在个人中心中我们常常采用头像和信息左右摆放的方式进行设计，这样可以让空间展示效果最小，同时效果更好。

　　在设计时，个人信息区虽然受限于空间，但是由于功能区“太素”，因此这部分设计往往我们对其背景进行设计，起到视觉引导的作用，同时让整个界面更有层次感。背景我们可以加底纹、渐变、扁平化背景等。

　　当然，并不是所有个人信息都要设计这么紧凑，如果各种中心功能入口较少，为了版面更加丰富，视觉效果更好，我们可以将这块区域设计得高一点。

　　在设计时，我们可以采用类似京东金融的卡片式设计，也可以采用日日煮的色块方式，也可以采用蚂蚁短租的大图背景方式。具体采用哪种方式从你的产品整体设计风格来定即可。

　　功能入口设计

　　个人中心其核心模块其实就是功能入口，因此清晰、有层次的布局尤为重要，功能入口我大概统计了有2种表现形式:列表式、宫格式。

　　1、列表式

　　列表式是最常见的展现方式，UI设计中个人页面设计攻略https://www.aaa-cg.com.cn/ui/2592.html?gpf其优势是层次展现清晰，灵活性高，方便信息后期扩展。其展现方式往往是图标+文字，图标主要根据产品整体图标风格而定，这里就不在赘述。

　　其缺点是，如果同级过多时，容易产生疲劳;视觉样式弱，视觉区分层级较差;只能通过排列顺序、颜色来区分各入口重要程度。

　　使用场景:多用于工具类和阅读类的APP中，不适合电商类功能模块较为复杂的APP中。

　　2、宫格式

　　宫格式也就是将页面划分为若干相同的区块，相关联的可分为一一个区块，其优势是可以强化功能操作;页面视觉效果更好。其缺点是在层次上不如列表式清晰简洁，会增加用户使用成本;另外不利于后期扩展，会出现了一行只有一个功能入口的情况。

　　使用场景:由于其视觉效果好，可以强化功能操作，因此我们看到很多电商、外卖、团购、短视频等都采用该展现形式，同时对于一些功能入口较少的APP，采用宫格式也可以让整个界面效果更丰富。

　　从上面的案列可以看出，宫格式设计图标占比较重，因此在设计时，图标是设计的重点，我们可以采用线性图标、线+面、面型图标进行设计，其设计风格同样根据整体规范的设计风格而定。

　　比如百度外卖采用了较为简洁的粗线性图标设计，和底部的面型图标拉开差距，提升界面细节表现力。而YY的设计风格就是线+面，让整个界面显得活泼。

　　三、突出核心功能入口

　　每个界面都有它的核心功能，不会出现整个界面都是核心的情况，这样就和没有核心是一个意思。

　　尤其是当个人中心功能入口较多，同时还要加入运营等功能入口，如果我们单独采用列表形式，会让整个界面过长，虽然层次清晰，但是视觉效果差，容易导致视觉疲劳。同时也不容易突出核心功能入口，那么我们可以怎么做呢?

　　宫格+列表对比

　　将功能入口分为不同的模块，然后采用宫格式+列表式的组合方式来进行对比，能够很好的突出宫格里的内容。同时可以采用差异化图标、分块、以及差异化的颜色等来强调核心功能入口。

　　差异化图标

　　采用差异化图标，也就是和原有的图标风格、大小等存在大的差异，这样即使同样的结构也能让核心功能入口脱颖而出。

　　利用图片进行突出

　　图片相比于图标、文字是最容易引起用户点击的。因此如果你想特别突出你的功能入口，那么不妨试试采用图片的形式突出。

　　总结

　　以上通过对个人中心的分析，大概讲解了我们在做页面时的思考过程,以上就是本周我对于界面的分析的思考希望对你有帮助。因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我会继续发包含有关在该领域工作的更多相关文章。

UI设计中个人页面设计攻略相关推荐

UI设计行业中的“延禧攻略”，教你从青铜变王者
最近一直在追<延禧攻略>,女主魏璎珞敢爱敢恨,有仇必报的性格吸引不少人,她从低贱的秀坊小宫女步步为营,最终成为皇帝最宠爱的令妃呼风唤雨.尔虞我诈的后宫,想要打怪升级光有颜值是万万不够的,更 ...
UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
ui设计中的版式设计_设计中的版式-第3部分
ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...
中嵌套的页面如何操作父页面_UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
UI设计中搜索页设计指南
在开始之前,我们先来想一个问题,用户为什么要使用搜索功能呢? 今天我带大家一起来探讨一下UI搜索页面的一些设计方法. 用户搜索的目的是为了快速找到自己想要的结果!搜索页是用户进行搜索的第一站,最理想的 ...
UI设计中智能电视设计指南
最近有小伙伴私信我关于电视端的设计问题,整理了一些个人最近在TV端应用的一些设计经验,供大家交流学习.以下就是我在TV设计的过程中整理的一些方法,结合自己有限的经验后总结的一些针对TV设计的方法规范, ...
Android开发-UI界面--类微信页面设计
Android开发-UI界面–类微信页面设计一.功能说明设计一个类似微信的主页面框架,UI布局为上中下结构,包含了四个tag页面二.开发技术本次用到了layout.xml.控件.监听.fr ...
UI设计中引导页设计指南
一个好的引导页设计会给用户留下良好的第一印象.也可以降低用户的学习成本,快速上手产品并了解新增功能,避免用户使用过程中的迷茫,减少误操作,是提升产品体验的必要手段.今天我就针对UI设计中引导页设计指南 ...
UI界面中的图标设计趋势与最佳实践
作为UI设计师,在日常的工作中,避免不了做图标规范.今天跟大家聊一聊,UI设计中的图标设计. 规范的重要性不用多说了,没有规范多个设计师绘制的图标会有很多差异,描边粗细.角度.圆角度等等.今天的文章和 ...

UI设计中个人页面设计攻略

UI设计中个人页面设计攻略相关推荐

最新文章

热门文章