发布时间：2023-9-23 分类： 行业资讯
本文作者与我们分享了一个案例：女性用户的照片编辑软件，如何设计UI？享受〜
照片是记录生活的重要手段。在今天的智能手机中，手机中有多少张照片？关键时刻的这些照片是每个摄影师无法复制的珍贵时刻。正因为如此，许多用户对摄影和照片的编辑和美化具有无与伦比的热情。今天的项目是设计一个照片编辑应用程序。
照片编辑中的APP用户类别现在非常广泛，但在总体比例中，年轻人是主流，年轻女性更有可能对其负责。在今天的设计案例中，Tubik Studio的UI设计师Tania Bashkatova和平面设计师Yaroslava Yatsuba负责。
任务简报
移动UI编辑APP UI和UX设计。
预处理过程
考虑到用户最大的观众是年龄在15到35岁之间的女性用户，设计师将为这些用户创建自拍和照片编辑应用程序。目前，该应用程序暂时命名为Cuteen，而Slogan将设置为“Meet the most beautiful”。你“。
在为这个APP设计UX时，它需要满足其最基本的六个功能，并且它可以保证现代，年轻，女性化和有趣的UI风格设计。此外，我们的团队决定创建一组用于UI的自定义图标，并结合相对明亮的配色方案。
在开始设计之前，设计师对用户和市场进行了研究。在此阶段收集的信息反映了用户的期望，对产品设计非常有用。该团队根据研究结果进行了头脑风暴，设计师在整个UX设计和风格偏好中反映了她的核心设计理念。
用户体验设计
设计师的首要任务是以直观的方式呈现所有功能，确保每个用户都能轻松进行图片编辑。为了提高此过程的效率，设计人员首先创建了一个线框来组织整个界面的信息架构。线框将可视化并快速可视化屏幕的布局和可视元素，供开发人员和客户进行可视化。
Cuteen这个应用程序包含6个基本功能，需要以最有效的方式呈现。设计师提供两种不同的布局选项。在第一个场景中，包括顶部圆形横幅和品牌名称，设计师设计了几个图标和相机按钮的布局变体。相机按钮是最高优先级的交互元素，它应具有行为召唤的特征，因此它应该与背景的其他元素具有足够的对比度。
在此方案中，有三种方法可以布置UI组件。第一种是将相机按钮与功能分开，而另外两种尝试使按钮和功能区在视觉上相关。
第二个选项侧重于功能的呈现。横幅被删除，图标位于屏幕顶部，而作为CTA元素的相机按钮位于中间。这种结构允许用户更多地关注，减少可能的干扰，并使导航更直观。此外，设计师还添加了一系列信息，显示最近的流行效果，让用户无需过滤即可查看最新和最流行的效果。
这两种解决方案各有优缺点，因此设计人员决定在UI设计阶段比较两种布局方案的优缺点。
UI设计
UI设计的主要策略是创造一种时尚和有趣的风格。考虑到这个应用程序主要面向年轻女性用户，设计师决定使用具有渐变效果的明亮配色方案。诸如照片按钮之类的CTA元素使用亮粉色。这种配色方案和漂亮的设计策略非常适合女性用户的气质和喜好。
使用六种对比色渲染六种不同的功能图标。通过这种方式，不同的功能与不同的颜色相关联，因此用户可以快速识别它们，而无需在熟悉应用程序时阅读图标标签。此外，为了使整个界面看起来更舒适和愉悦，设计师使用白色背景使整个布局更加视觉平衡。
经过多次探索，设计师选择了第二个选项，即没有Banner的选项。然后，设计人员将上图中的三个变体开发为默认UI解决方案。这种结构使交互区域更清晰，更符合逻辑。此外，第二种解决方案内置了许多不同的样式供用户选择和随意切换。在此版本的设计中，用户的注意力将集中在自定义图标上。
总而言之，Cuteen的UI界面看起来明亮而充满活力，具有直观的交互系统，原始信息流和自定义图标集。
自定义图标设计
原始自定义图标是此应用的亮点之一。对于参与该项目的平面设计师来说，这是一个有趣的挑战。
为了节省时间，构思和完成工作，设计师选择了手绘草图。设计师提供三种不同风格的图标，并为每种功能提供各种概念设计。
最终，在UI设计师决定使用第二个设计之后，图形设计师将草图重新绘制为数字图标，渲染所有细节，并且自定义图标增强了整个UI界面的可识别性。此外，这些自定义图标还支持自定义样式，这使整个设计看起来多样化和免费。
设计师创造了两种不同风格的图标，第一种设计与多彩风格兼容，可以看起来更亮。笔划的相对简单的图标可以与基本布局更兼容。图标的边缘设计为封闭，遵循格式塔原则，并在视觉上由人补充。这种设计使图标看起来充满活力和趣味。
总而言之，这些小细节使整个APP强大而实用，设计师应该专注于每个UI组件，包括图标和按钮。
原作者: Tubik Studio
译者/编辑:陈子木
翻译地址：https://www.uisdc.com/case-study-cuteen-uiux-design
本文由@陈子木授权，未经作者许可，禁止转载。
该地图来自Unsplash，基于CC0协议
