个人中心页面的UI设计知识点
在移动端设计中,个人中心页面有许多设计细节点是需要设计师去注意和挖掘的,看似结构简单的页面其实包含了很多平时容易被忽视的细节。本篇内容是巩固总结关于个人中心页面的相关设计知识点,仅用于学习,如想详细了解,具体可移步到优设文章详细查阅。
个人中心
与用户相关的各种数据、功能入口和全局性操作的汇总。仅用户本人可见。大多数产品的个人中心可以总结为几大信息模块:个人信息、全局操作、重点推广、核心功能、全部功能。特别复杂或者简约的产品可以在此基础上增加或者删减模块。
设计目标:提高效率。
个人主页
用于展示用户信息以塑造形象,由用户的基本信息、身份等级、自主上传的内容组成,常见于带有社交属性的产品。
设计目标:展示个性。
头图
一般放置在页面顶部。顶部设计形式多样,具体结合产品的业务属性和风格调性。头图主要分为两类:固定样式、自定义样式。
- 一般社交类属性的产品,允许用户自主上传背景图片,目的是鼓励用户充分展示个性。
- 对于工具类产品,则稳定和秩序感比个性更加重要。
头图样式案例
素底
背景主要以白色白灰色为主的简约风轻装式
背景使用简单的渐变色、纹理、几何等装饰性元素点缀,简约而不单调。品牌感
使用主色、logo原色,强化品牌视觉
插画
背景一般有插画 做装饰,增加界面的趣味性。 摄影图
一般使用摄影类的图片为背景,常用于摄影类带有社交属性产品,具有真实性。
场景化
添加一些带有专属于产品的场景远景,拉近用户与产品的距离。
身份专属
具有象征身份代表的元素装饰,常用于付费类或者游戏类产品中。
全背景
头图背景覆盖整个界面,更强调产品风格属性。
自定义
用户可以跟据自己喜好,上传背景图展示,主要突出用户的个性设置。
个人信息
个人信息模块一般包含:头像、昵称、身份属性这类内容。
从布局上来看,一般有以下几种排版方式:
- 头像居左
- 头像居中
- 头像居右
线上产品超八成使用头像居左的布局方式。通常人的浏览习惯呈现“F”形,左上角内容是最先触达人眼的信息,适合放置关键信息便于定位。
头像居中的布局方式适用于个人主页,更加强调和突出头像本身,对于社交产品来说,也是一种增加差异化的选择。
全局性操作模块
一般指的是如设置、信息、扫一扫等产品层面的内容,不仅限于当前页面。
全局性操作有 3 种常见的布局方式:
- 放置在导航栏
拓展性最强,多个控件添加摆放而不会出现页面局促,同时符合用户使用习惯。
- 放置在个人信息模块内
拓展性较弱,当昵称较长,控件较多时,容易在视觉上感觉拥挤。
一般来说不推荐此类设计排版,业务拓展性较差;同时从信息亲密度上来说,个人信息和全局性操作也不属于同意模块内。
- 放置在下方列表中
弱化了“设置”,通常认为如果“设置”的优先级较低,无需单独将其展示在头部,直接以列表的形式放置在底部即可。
布局形式
个人中心主要分为两大区块,头(个人信息+全局操作)+身(功能集合)。主体部分一般承载的内容是个人中心页面的各种功能集合,承载形式有:列表、卡片、宫格、泳道。
头、身板块的过渡形式
- 直接衔接:个人信息区域没有特殊设计,和主体功能入口部分没有明确差异,信息直接铺陈,页面整体性强。
- 头部向下渐变过渡:头部色彩,主体背景消色,中间用色彩渐隐的方式进行过渡,较为自然
- 线性隔断:头身直接隔断,有明确的分界线。头部和主体分割感较为强烈,便于定位。
- 卡片衔接 :头身有一条明确的分割线,用卡片置于其上,作为衔接,视觉上更加和谐紧凑。且位于分割线之上的卡片往往承载的是最重要信息,如订单信息或会员信息。
- 头像衔接 :放置在关键的头身分割线上,头像的面积一般较大,该设计比较注重个性化表达。
- 类弹窗式:用类似底部半弹窗的形式盛放主体内容,给人主体内容“高于”头部背景的印象,更加突出主体内容。
- 特殊分割:水平分割、渐隐,其他的分割方式如斜线分割或者弧度分割,增加了页面的创意和独特性。
侧边栏(抽屉)
在Tab Bar中,个人中心一般位于最后一个或者倒数第二个。若无Tab Bar的产品,如滴滴等工具型产品常使用侧边栏的形式盛放个人中心相关信息。
有些产品有 Tab Bar,依然将个人信息收纳在左上角,如网易云音乐和 qq。其中 qq 采用了全屏的侧边栏形式。
未登录状态
- 当用户是未登录状态时,有些产品不向用户开放浏览个人中心页面的权限,要求用户必须先完成登录注册。
- 更多产品允许用户进入个人中心页面,当用户触发某个操作时,提示用户进行登录。
- 未登录状态下的个人中心,没有用户信息。默认头像+注册登录来占位显示。
中性占位图为默认头像,具有通用性。
使用 ip 作为默认头像,兼具品牌感和设计感 。
快捷登录直接在个人中心页面露出登录方式,减少交互步长。
个人中心页面的UI设计知识点相关推荐
- 最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯...
最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:http ...
- php 个人中心常见界面,UI设计灵感:个人中心界面设计(User Profile)
UI设计灵感:个人中心界面设计(User Profile) 9月 21, 2016 评论 Sponsor 只要有会员功能的网站或移动 APP,都应该有个人中心界面(User Profile),该界面就 ...
- 商品表有哪些字段_商品页面的UX设计准则,有效促成交易
本文主要介绍了在设计电商商品详情页面时需要注意的交互设计准则,并给出相关示例说明商品页面在哪些方面做改进能有效帮助用户选购商品并最终促成交易. 在线购物的客户通过商品页面来做出购买决定,回答问题.进行 ...
- 音视频基础学习之【07.仿优酷界面的UI设计】
目录 界面设计 主页界面设计 QScrollArea 添加地方电视台 bug修复 注册登录客户端 界面设计 注册 协议设计 注册按键 发注册请求包 处理注册回复包 注册密码字段使用MD5进行加密,加固 ...
- 最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯
1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:https://github.com/Yalantis/Side-Menu.Android 2.Context ...
- SAP Spartacus 产品明细页面的 url 设计和数据源
明细页面 url: http://localhost:4200/electronics-spa/en/USD/OpenCatalogue/Cameras/Digital-Cameras/Digital ...
- SAP Spartacus user form页面的css设计重构
(1) fieldset应该和legend搭配起来用.下图的第102行fieldset应该改为div: (2) 在_details.scss里,fieldset和label.form-check具有相 ...
- SAP Spartacus user role页面的checkbox设计明细介绍
1:tag选择器 2. class选择器 3. tag选择器 把font-weight:bold去掉之后的效果: 把font-size: 18px去掉后的效果: cx-org-list label: ...
- 不同品牌android手机ui,各大安卓手机品牌里,系统UI设计对比,谁赢了?
国产品牌的安卓手机虽然都使用的是安卓系统,但随着各自品牌的发展优化,UI界面设计形成了各自品牌的鲜明特色. 品牌之间页面的UI设计和风格很大不同,那到底谁家的UI设计界面完胜呢? 跟随教授一起来看看吧 ...
最新文章
- 苹果设置网易邮箱收件服务器,如何在iPhone 3/4、iPod touch的邮件应用程序中使用IMAP服务...
- 世界-中国-省-市-县 天气预报
- python爬虫基础(一)~爬虫概念和架构
- C# 发邮件 服务器响应为: 5.7.0 Must issue a STARTTLS command first
- BCVP,想真正为社区做努力的开发者们
- axios发送post数据后台收不到_使用axios post 提交数据,后台获取不到
- mysql录数据总是错误_MySQL数据库出错
- MVC中利用ActionFilterAttribute过滤关键字
- cv2 inrange灰度图_基于openCV,PIL的深色多背景复杂验证码图像转灰度二值化,并去噪降噪处理分析...
- C语言封顶,我们的大屋顶|阳光方舟2.0--C-HOUSE正式封顶
- note3 android system recovery,三星note3 N900v刷第三方rom
- linux内核数据链路层,基于Linux数据链路层的MPI集群通信机制的设计与实现-嵌入式系统-与非网...
- ffmpeg yuv数据存储方式_一文理解 YUV
- undo歌词中文音译_《U-n-d-e-r–STANDING!》中文歌词及音译
- 2017-2018-1 《程序设计与数据结构》课程总结
- wdf中的两个宏WDF_DECLARE_CONTEXT_TYPE WDF_DECLARE_CONTEXT_TYPE_WITH_NAME
- Vue 合同模板_【开源】后端开发也很容易上手的前端框架模板
- [转帖]揭秘太湖之光
- 代码报错 Uncaught TypeError: Converting circular structure to JSON
- 标准字头密码体制c语言,关于Playfair密码体制