赞助商
立即赞助

一个针对女性用户的照片编辑软件,要如何设计UI?

产品经验3年前 (2021)发布 流光
2.8K 0 0

照片是记录生的重要手,在智手机如此普及的今天,谁的手机里面又没有几百上千张照片呢?这些记录键时刻的图片,对于每个拍摄者而言都是可复制的珍贵瞬间。正是因此,许多户对于摄影和照片的编辑美处,都有着无与伦的热情。今天的项目,是设计一个照片编辑 APP。

现在照编辑类的 APP 用户受众非常泛,但是在整比例当中,年轻人是主,而年轻女在其中的占比更大。在今天的个设计案例当中,是由 Tubik Studio 的 UI 设计师 Tania Bashkatova 和平面设计师 Yaroslava Yatsuba 负责的。

一个针对女性用户的照片编辑软件,要如何设计UI?

任务简述

移动端图片编辑 APP 的 UI  UX 设。

预处理流程

考虑到用户的受众15~35岁之间的女性用户,设师将会针对这些用户制作自拍照片编辑 APP,目这款 APP  暂时 Cuteen, Slogan 则「遇见丽的」。

在针对这个 APP 进行 UX 设计的时候,需要满足它最基本的六个特征,在格上够保证现代、年轻、女性、趣味的 UI 设计。此外,我们团队还决定创建一组自定义图标到 UI 当中,并且结合相对艳的配色方案。

在开始动手设计之前,设计师针对用户和市场进行研。个阶段搜集的信息能够反映出用户的期待,对产品的设计非常有用。团基研究成果进行头脑风暴,设计师则将她的核心设计思想现在整个 UX 设计方案和风偏上。

UX 设计

设计师的首要任务是将所有的功能以直观的形式展现出来,确每个用户能够进行便捷的图编辑。为使个程的效率更高,设计师先创建框图来整理整个界面的信息架构。框图将将屏幕的局和视化的元素视化的、快速地呈现出来,让开者和客户以直观地。

Cuteen 这个 APP 包含6个基本的功能,这些功能需要以最有效的方式呈现。计提供了种不同的布局方案。第一个方案当中,包含了顶部的圆形 Banner 和品牌名称,计计了包含基本功能的图标和拍照按钮的若干布局变种。其中拍照按钮作为优先最高的交互素,它应该有行为召唤的点,所以它和背景其素应该有着足够的对比。

一个针对女性用户的照片编辑软件,要如何设计UI?

这种方案中的 UI 组件的布局方式有三种,第一个是将拍照按钮和功能开,而另外种方案则尽量让这个按钮和功能之间在视觉上产生关。

一个针对女性用户的照片编辑软件,要如何设计UI?

第二个方案则专注于功能的展示。Banner 被删除了,图标被放置在屏幕的顶端,作为 CTA 素的拍照按钮被置于中间。这种结构让用户更能够集中注力,减少可能存在的干扰,并且让导航更加直观。此外,计还增加了一个显示最近流行效果的息流,用户可以无需筛选就能最新最流行的效。

这两个案各有优劣,此设计师决定在 UI 设计阶段比较两布局案优劣。

UI 设计

UI 设计主要策略是创造时尚和富有娱乐性风格。考虑到这款应用主要是年轻女性用户,此设计师决定采用明亮配色案搭配渐变效。而诸如照按钮这样 CTA 元素则使用明亮粉红色。这样配色和美丽设计策略,与女性用户质和偏好常契合。

至于六不同功能的图标则使用六种对比色呈。通过这种方式,让不同的功能不同的色彩产关联,这样一,用户逐渐熟悉应用的过程中,可以不用阅读图标标签的提下速识别它们。此外,了让整界面看起加舒宜人,设师使用了白色的背景,让整布局视觉加平衡。

一个针对女性用户的照片编辑软件,要如何设计UI?

一个针对女性用户的照片编辑软件,要如何设计UI?

经过多探索后,设计师选择了第个案,也是没有 Banner 这个案。随后设计师开发出了上图三个变体,作为默认 UI 解决案。这结构让交互区域更为明晰,而逻辑晰。另,第个案内了许多不风格样供用户选择,随意切换。在这个版本设计,用户注意力会在自定义图标上。

总言之,Cuteen 的 UI 界面看起明亮充满活力的,直观的交互系统,原创的信息流自义的图标集。

一个针对女性用户的照片编辑软件,要如何设计UI?

自定义的图标设计

原创自定义图标是这个 APP 亮。于参与这个项目平设计师而言,是个有趣挑战。

了节省时间构思并完作品,设师选择了手绘草图。设师提供了三套不同风格的图标,并且每功能提供了各种各样的概念设。

一个针对女性用户的照片编辑软件,要如何设计UI?

一个针对女性用户的照片编辑软件,要如何设计UI?

最终,UI 设计师决定使用第个设计案后,平设计师将草图新绘制为数化图标,所有细节都到了呈现,自定义图标提升了个 UI 界可识性。另,这些自定义图标样支持自定义风格,这也使个设计显多样而自由。

一个针对女性用户的照片编辑软件,要如何设计UI?

设计师制作了两不风格图标,第设计是为了兼容多风格,它可以看起来更加明亮。而笔触相简约图标则可以更好兼容基本布局。图标边缘被设计不闭合,这遵循是格塔原理,会在视觉上补全。这样设计让图标显充满活力而有趣。

一个针对女性用户的照片编辑软件,要如何设计UI?

而言,这些细小细节会让个 APP 显强大而实用,设计员应该关注个 UI 组件,括图标和按钮。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

接下来,恐怕要进入设计师最为忙碌的季节了!年底大量的工作需要完成,所以这次的设计圈干货合集当中,不仅汇集了一波最新的...
干货
我在工作中经常听到设计师在阐述一个设计方案时候会提到可用性。听得多了就会觉得很头大,因为设计方案的亮点并没有具体体现...
产品
最近发现有很多童鞋关心如何从UI进阶到UX的问题。那么我以一个非科班出身的UI到大厂资深UX的经历,不带黑话用4k字作文给大家...
ui设计
编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳...
ui设计
提问:以下水果中哪一种给你印象深刻呢?老规矩,读完这篇文章你就知道了。 苹果、桃子、香蕉、柿子、梨、橘子、橙子、西瓜...
经验分享
问对问题才能找对答案,这个逻辑并不复杂,但是在做产品设计的时候,要做到并不是那么容易的事情。如何提问,对于最终产品的...
Eugen Eşanu
在下面这幅图中,哪一个盘子会让你吃得更少?是用20cm的小盘子,还是直径30cm的大盘子?凭直觉,我们会觉得较小的盘子会让人...
用户体验
这篇内容较少,但是非常重要实用,因为提供了很明确的几份设计走查表,用于在发布产品之前检验问题、清单共有4个,分别针对不...
交互设计流程