UI 设计思路：先放飞概念，再落实到产品

2025-7-4    涛涛 移动端UI设计文章及欣赏

UI 设计思路应先放飞概念探索多种可能，如将泡泡圈视为独立 APP 进行设计，尝试简约风格、气泡形通知栏、胶囊形头像、实心图标等创新设计，再结合实际落实到产品，比如因开发资源和屏幕显示限制去掉渐变和弥散投影、回归分割线和返回按钮，同时要明确设计与艺术的区别，设计需围绕客观问题解决，概念稿后要提取可用点推动落地，注重用户习惯和跨平台适配，像用爱奇艺 Logo 代替文字返回按钮。

image.png

image.png

一、概念设计阶段的探索

  1. 设计定位与创新方向
    • 将泡泡圈视为独立 APP 进行设计，去掉返回爱奇艺视频的入口，挖掘更多设计可能性。
    • 采用简约风格，强化页面内容展示，优化浏览体验，如融合标题栏与搜索栏，去掉分割线、Card 区间，通过间距区分信息，消除 Y 轴层级多的问题。

      image.png

  2. 具体设计创新点
    • 通知栏设计：以两个连接的气泡形式展现通知栏和通知按钮，增强视觉突出性。
    • 头像形状：首创胶囊形头像，兼顾三行信息排版，避免小屏手机宽度占用过多空间。

      image.png

    • 图标选择：采用实心图标，依据国外设计师 Aubrey Johnson 的 25000 个图标识别实验，实心图标更符合大众审美且识别速度更快，如手机 QQ 和 Apple Music 也改用实心图标。

      image.png

    • 信息展示：明星圈简介字段保留，布局与推荐页一致；明星标签页将排序信息放列表左侧，不外露影响力分值等与排名相关信息，营造榜单氛围。

二、落地阶段的调整与优化

  1. 调整的关键因素
    • 开发实现限制：iOS 和安卓对弥散投影实现效果不理想，部分软件需切图实现，快节奏项目开发资源不足时避免使用。
    • 跨平台显示差异：安卓平台手机屏幕质量千差万别，放弃渐变色设计。
    • 用户习惯适配：用户常误点首页上方返回按钮，基于 Web 端点击网站 Logo 返回主页的习惯，尝试用爱奇艺 Logo 代替文字返回按钮。
  2. 具体调整内容
    | 调整项 | 调整前 | 调整后 |
    |------|------|------|
    | 分割线 | 去掉 | 回归，保留页面顶部和底部两条，将页面分为三块简化布局 |
    | 渐变和投影 | 使用渐变和弥散投影 | 去掉渐变和弥散投影 |
    | 底导航图标 | 无文字说明 | 底部追加文字说明 |
    | 返回按钮 | 文字返回 | 尝试用爱奇艺 Logo 代替 |

三、设计核心认知

  1. 设计与艺术的本质区别
    • 艺术围绕主观情绪，抒发自我；设计围绕客观问题，解决问题。概念稿阶段设计师像艺术家可随心所欲，但需最终落地解决实际问题。
  2. 创新与实践的关系
    • 创新隐藏在被忽视角落，如跨平台操作习惯的尝试，虽有实验性但可能成为开拓者。大胆行动很少完美，但不完美的行动胜过完美的空想。

关键问题：

  1. 概念设计阶段有哪些关键的创新尝试？
    • 答案：概念设计阶段将泡泡圈视为独立 APP，去掉返回爱奇艺视频入口；采用简约风格，融合标题栏与搜索栏，去掉分割线和 Card 区间；通知栏以两个连接的气泡形式展现；首创胶囊形头像；采用实心图标，这些创新尝试旨在优化浏览体验和视觉效果。
  2. 落地阶段为什么要去掉渐变和弥散投影？
    • 答案：因为 iOS 和安卓对弥散投影的实现效果都很不理想，部分软件需通过切图实现阴影效果，在快节奏项目且开发资源不充足的情况下不适合尝试；同时考虑安卓平台手机屏幕质量千差万别，渐变色显示效果难以统一，所以落地阶段去掉了渐变和弥散投影。
  3. 设计与艺术的核心区别是什么？
    • 答案：设计的核心是围绕客观问题解决问题，而艺术的核心是围绕主观情绪抒发自我。在概念稿阶段设计师虽可像艺术家一样随心所欲，但最终设计需落实到解决实际问题，不能仅追求酷炫而不考虑实用性。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

« 6 个令人惊讶的、伤害诵读困难患者的不良习惯 UI 设计师如何让前端实现设计稿的像素级还原 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档