最近刚刚完成一个项目，我发现我的设计效率比以前提高了30%以上。 之前做界面的时候，总是担心该用什么样式、布局。 但现在看到原型后，我大概知道该怎么做了。 没有了制作页面的麻烦，效率自然就提高了。
我想主要是因为这些年的分析和总结的结果，让我能够清楚地知道什么时候该使用哪些交互方式，什么时候该使用哪些风格。 那么明天我想跟大家分享一下“个人中心页面从思考到设计的全过程”。
在设计之前，我们需要思考两个问题，什么是个人中心？ 以人为本的设计的目的是什么？
个人中心有哪些
个人中心是APP内所有功能点的集合入口，您可以在其中查看个人资料、个人信息等相关功能界面。
在应用中，通常有两个界面需要我们区分清楚，那就是个人中心和个人主页的区别。 个人中心是个人信息和功能的集合。 我们通常称之为“我的”，只有用户才能看到； 并且个人主页显示我发布的新闻等，其他人可以看到。 而明天我们将分析功能更复杂的个人中心页面。
以个人为中心的设计的目的
1、个人信息展示（让用户知道这是我的个人中心，不是张三、李四的。）
2、功能入口设计（功能入口及个人中心页面主要模块，清晰的解读方式可以帮助用户高效实用）
3.突出核心功能入口（突出核心功能入口，例如我在电商APP中的订单是用户常用的入口，所以这个模块需要突出其设计，得出与其他功能入口的区别，并帮助用户快速操作。）
个人信息
个人信息区相当于一个位置。 用户进来时首先需要看到的个人信息具有最高的优先级，因此常常被放置在界面的开头。 由于这个界面的主要作用是指出功能入口，突出重要功能，所以很多区域不会用脑设计。
同时，还用一小块区域来显示头像信息。 因此，在个人中心，我们经常采用头像和信息左右放置的形式进行设计，这样可以最大限度地降低空间展示的疗效，同时也提高了空间展示的效果。更好的。
在设计时，个人信息区域其实受到空间的限制，但由于功能区域“过于单一”，我们往往会设计这部分设计的背景，以起到视觉引导的作用，同时使整个界面更有层次感。 背景我们可以添加阴影、渐变、平坦背景等。
当然，并不是所有的个人信息都应该设计得如此紧凑。 如果各个中心功能的入口较少，我们可以把这个区域设计得高一点，布局更丰富，视觉效果更好。
设计时，我们可以采用类似于京东金融的卡片式设计，或者每日做饭的色块形式，或者蚂蚁短租的大图背景形式。 使用哪种方法取决于你产品的整体设计风格。
功能入口设计
虽然个人中心的核心模块是功能入口，但清晰、层次分明的布局尤为重要。 我大致统计了功能入口的两种表现形式：列表式和宫殿式。
1.列表类型
表格法是最常见的解释方法，其优点是层次解释清晰、灵活性高、方便后期信息扩展。 它的解释方式往往是图标+文字，而图标主要由产品的整体图标风格决定，这里不再赘述。
它的缺点是同伴太多，容易造成疲劳； 视觉风格弱，视觉识别水平差； 每个条目的重要性只能通过顺序和颜色来区分。
使用场景：多用于工具类、阅读类应用，不适合电商功能模块复杂的应用。
另外，在列表设计中，我们还可以将列表按照业务分类进行分组，方便用户浏览查看。
例如上图中，支付宝将账单、总资产、余额、余额宝、银行卡我的资产分为一组； 芝麻信用、保险服务、花呗等功能入口归为一组； 其他功能如陌陌、Get、搜狐新闻、网易新闻、百度阅读等功能从上图可以看出，都被分组到相关的组中。
这样做的目的当然是降低界面层次，让用户更快地找到所需的信息或条目。
2. 宫殿形式
宫殿格式是将页面定义为若干相同的块，相关的可以分为一个块。 其优点是可以加强功能操作； 页面视觉效果更好。 它的缺点是在层次上不像列表类型那么清晰和简单，这会降低用户的使用成本； 另外也不利于后期扩展，会出现每行只有一个函数入口的情况。
使用场景：由于其良好的视觉效果，可以增强功能操作淘宝网站功能模板，所以我们看到很多电商、外卖、团购、短视频等都采用这种解读方式。 整个界面更加有疗效。
从之前的案例可以看出，宫廷风格设计中的图标占了比较大的比例。 因此，图标是设计的重点。 我们可以使用线性图标、线+面、面图标进行设计。 设计风格也是按照整体的标准设计风格而定。
例如，百度外卖采用了相对简单的粗线形图标设计，与顶部的人脸图标不同，提高了界面细节的表现力。 而YY的设计风格是线+面，让整个界面变得欢快。
突出核心功能入口
每个界面都有其核心功能，不会出现整个界面都是核心的情况，相当于没有核心。
尤其是当个人中心的功能入口较多，并且同时添加了操作和其他功能入口时。 如果我们单独使用list方法，整个界面就会太长。 虽然层次清晰，但视觉效果较差，容易造成视觉疲劳。 同时，想要突出核心功能入口并不容易，那么我们该怎么办呢？
网格+列表比较
将功能入口划分为不同的模块，然后采用宫殿格式+列表格式的组合进行对比，可以很好地突出宫殿网格中的内容。 同时可以通过差异化的图标、区块、差异化的颜色来指出核心功能的入口。
以京东金融为例，其功能区布局是将核心功能区签到、日常签到、日历、任务等能够提升用户粘性的模块以宫殿的形式诠释出来，同时采用差异化的图标指出。
以百度钱包为例，用户经常使用的交易记录、卡包、交通银行卡等均采用宫殿格式布局，而其他资产条目则以列表方式突出显示。
以大众点评为例，它以宫殿的形式展示收藏夹、待评论、列表、最近浏览、好友、订单模块、优惠券、积分、钱包等信息。 其中，大众点评最突出的功能就是收藏和待评论。 、列表、最新浏览、好友这五个主要信息。 因此，图标采用了差异化的渐变设计，以区别于其他内容。 最后，将一些不重要的会员等级、日常福利等信息以列表的形式进行解读。
差异化图标
采用差异化图标淘宝网站功能模板，即与原来的图标样式、大小有较大差异，这样虽然结构相同，也能让核心功能入口脱颖而出。
以百度糯米为例，你是否第一眼就被惠观赛、吃大餐、订球场、特价房这四个特殊的篮球图标所吸引？
以国美为例，新人特权是平铺的，且图标与其他功能图标不同，因此很容易突出新人特权模块。
使用图片来突出显示
与图标和文字相比，图片最容易引起用户点击。 所以如果你非常想突出自己的功能入口，不妨尝试用图片来突出。
以淘宝为例，我分别截取了第一屏和第二屏的截图。 我们可以看到，淘宝个人中心信息量很大，整体采用宫殿格式+图片列表+宫殿格式。 从上图我们可以看到，我的订单虽然是用户比较常用的功能，但它被放在了个人信息区域的下方，而且也处于整个界面的黄金分割位置。 同时，图标以白色和我最喜欢的图标处理来区分。
但作为一款电商应用，用户留存和转化才是关键。 因此，点红包、三单有礼、天猫超市卡等以横幅图片的形式突出显示，用更看得见的好处来留住用户。 用户继续。
总结
通过上面个人中心的分析，我们大致说明了我们制作页面时的思考过程。 在设计之前，我们需要问自己两个问题。 这是什么页面？ 这个页面为什么要这样做，即设计的目的是什么。 了解了这两个问题之后，我们最后要分析一下怎么做？
我们可以根据设计目的一一分析。 比如我的个人中心页面的目的是个人信息区域的展示、功能入口的设计、核心功能入口的突出。
那么我们如何从这三个目的来分析呢？ 例如，个人信息区域优先级最高，但重要性较低，因此往往放置在页面底部，但设计所占比例应尽可能小，以便为功能性预留界面空间。具有高度重要性的入口区域。 通过分析头像和信息，左右结构是最小的，这样我们就可以确定如何布局。 而且风格与我们产品的整体风格一致，好办。
然后是功能区的显示。 通常有两种解释方法：列表和网格。 列表层次表达清晰，视觉表现较差，常用于工具、阅读产品； 宫殿式是因为其视觉表现力好，但层次表现力差。 ，常用于函数入口较少的情况。
最后，对于突出核心功能的入口，我们可以采用列表+网格比较、图标差异化比较、图片差异化比较等方式。
