小调整,大提升:用户界面优化的实用技巧与案例分享

北京/设计爱好者/321天前/60浏览
小调整,大提升:用户界面优化的实用技巧与案例分享
在用户界面设计中,即使是一些微小的调整,也能大大提升用户体验和用户的参与度。最近,我和一位学生一起优化了一款移动应用的界面设计。虽然最初的设计已经有了不错的基础,但还缺少让人眼前一亮的层次感和视觉吸引力。经过一些简单的调整,我们让设计变得更好用、更美观。在这篇文章中,我会分享设计前后的对比,并详细讲解我们具体做了哪些改动。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
从个人资料页面的设计开始,我注意到它的布局简洁而有条理,但有几个问题让人感觉有些平淡:
  • 缺乏视觉层次:所有元素都有相似的视觉权重,这让用户很难快速识别最重要的操作。
  • 按钮样式:推荐和奖励 "按钮与布局的其他部分融为一体,失去了成为焦点和引导用户互动的机会。
  • 深度和间距:阴影和色彩对比的缺失造成了设计的扁平化,影响了可用性和导航功能。
微小改动带来的变化
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
以下是我们如何改进个人档案页面以及使其更加生动的具体调整:
  • 增强视觉层次:我们为 “推荐和奖励 ”按钮添加了明亮的蓝色背景并略微抬高,使其成为明确的焦点,鼓励与这一关键功能进行互动。
  • 改进间距和分组:调整元素之间的间距并对相关项目进行分组,使布局更有条理,帮助用户区分 “设置与偏好 ”和 “支持 ”等部分。
  • 使用图标和排版:我们对图标和排版进行了改进,使外观更加简洁。图标有了更多的空间,文字样式强调标题而不是副标题,使内容更易于扫描。
分析主页设计
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
现在,让我们来看看应用程序的主页。设计看起来还可以,但感觉很平淡,而且不容易浏览。原始布局的主要问题是
  • 视觉清晰度:设计扁平,更像是一个线框,地图图像在视觉上无法吸引用户。
  • 内容分组:元素的样式千篇一律,使界面感觉单调。最近地点 “和 ”交通更新 "等关键部分缺乏差异化。
  • 互动元素:天气警报 "等互动元素并不突出,可能会让用户对可操作的项目感到困惑。
改进主页
我们对主页进行的调整提高了可用性和参与度:
  • 突出行动区域:主页“、”工作 “和 ”收藏夹 "等主要按钮采用了独特的图标和间距,使常用部分易于定位。
  • 地图增强:对比度更强、更生动的地图,加上微妙的高低起伏,成为一个明显的焦点,同时又不会喧宾夺主。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
  • 内容区分:将 “公共交通 ”和 “交通更新 ”等关键部分与对比鲜明的背景进行分组,提高视觉扫描效果。
  • 强调警报:交通和天气警报用独特的颜色和图标来吸引用户的注意力,帮助用户快速识别关键信息。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
在设计中应用这些概念
如何将这些设计策略应用到你的项目中?以下是一些提示:
  • 确定关键元素:首先要明确哪些元素需要强调。建立一个视觉层次,突出关键操作--比如个人资料页面上的 “推荐和奖励 ”卡片。
  • 对类似元素进行分组:将类似的项目组织成不同的部分,如将个人资料信息与 “推荐和奖励”、“设置 ”和 “支持 ”进行分组,使布局更加直观。
  • 添加描述性小标题:小标题可提供清晰度,通过明确标注内容和引导用户完成选项来增强用户体验。
  • 使用颜色层次和对比:选择对比鲜明的颜色来营造视觉上的区别,例如使用浅蓝色背景搭配深蓝色图标,营造出协调而醒目的效果。
  • 小窍门:开发一个调色板,每种颜色的色调从 100 到 950 不等,以确保各元素之间的灵活性和一致性。
增强定位页面设计
让我们利用这些经验来改进下面的设计:
定位页面给人的感觉有点平淡,所以我们要努力让它更吸引人。与其使用图片,不如尝试使用图标,使整个用户界面的设计保持一致。通过添加多个部分来调整布局,也有助于组织内容,使导航更容易。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
最初的调整会让版面看起来更有条理,但可能还是会让人觉得缺乏个性。首先,我让 “固定位置 ”部分更加紧凑。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
然后,我设计了一个调色板,以增加独特性和个性。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
在调色板中,选择四种搭配得当的重点色调。较浅的色调(如 50 号色调)可用于背景,而较深的色调(如 400 号色调)则可突出前景元素。
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
以下是 “地点 ”页面的最终设计,展示了设计前后的对比:
小调整,大提升:用户界面优化的实用技巧与案例分享
Collect
设计师的主要收获
  • 小改动,大影响:对间距、对比度和深度进行简单调整,就能显著提升用户体验。
  • 考虑视觉层次:利用颜色、大小和位置在界面中创造自然的流程,引导用户进行重要操作。
  • 创造深度和焦点:即使是增加微妙的深度,也能让界面看起来更精致、更专业、更直观。
1
阅读原文
|
Report
|
3
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
水墨动物插画日历
Homepage recommendation
相关收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
详情页
详情页
详情页
详情页
精选收藏夹
作品收藏夹
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
精选收藏夹
作品收藏夹
餐饮案例
餐饮案例
餐饮案例
餐饮案例
精选收藏夹
作品收藏夹
大家都在看
Log in