设计师如何1小时快速重设计?

用户头像
厦门/UI设计师/6年前/204浏览
设计师如何1小时快速重设计?
用户头像
拾柒酱

适用于任何UI的快速重设计方法。



快速设计简介

 

我提倡快速重设计技术已有一段时间了。这个想法很简单——减少手眼的滞后性并做出就像没有经过考虑的超快速的决策。这样做的逻辑是,经过足够的练习,你就能自动做出正确的选择。

 

即便你做错了,你也会得到一个比你可以改进的更快的结果。有人认为这是在破坏正确的UX流程 ™,但实际上,这让你有可能在会议开始之前就有实质性的内容去展示。而且,当设计过程变得更快更简洁时,它对于任何技能来说,都是不错的补充。

 

你可以在此处详细了解该技术方法:快速设计不是你想象中的那样

https://uxdesign.cc/speed-designing-is-not-what-you-think-cf22818f8dff

 



迷你案例研究:Signal应用程序重设计

 

我现在正在写一篇关于UI设计样式的深色模式的文章,但是我选择说明的例子(Signal Messenger应用程序)中还有其他问题。通常那些很容易修复。


深色模式在这里只是一个背景,仅是说明整个修复过程中思维过程的图示。当然,重新设计完全是主动的。现在,让我们开始吧。


原稿在左侧。在中间添加了对齐标注。重设计在右侧。

 



首页

 

从消息列表屏幕开始,我们首先确定左侧边距。通常,这是开始视觉重新设计的最简单方法。然后,为了检查对象的比例,我创建了一个红色圆圈,该圆圈的大小与个人资料图片的大小相同。

 

正如你在屏幕中间看到的上,并非所有内容的侧面都具有相同的对齐方式,并且图标成比例地大于其应有的大小。

当然,边距不总是必须完全相同,但是在这种情况下,这似乎不是计划的方法,而是由前端开发人员以这种方式进行编码。

 

下一步:创意

创建小网格并定义至少两个间距值之后,就该看看导航了。新消息按钮(当前:右上角)很有可能会经常使用。我将其移至右下角,拇指可以轻松访问该位置。


如您在大多数电话上所看到的,右下角(对于惯用右手的用户)将是最重要的按钮访问位置。

 


另一个可能引起争议的想法是使消息视图更具可读性。当然,这是以在屏幕上看到较少消息为代价的。在这种情况下,我建议在设置中使用常规和压缩模式,以满足所有偏好。

 

故事?真的可行?

这里的“故事”只是群聊或“发给所有朋友”的公开消息,您可以从屏幕顶部进入。这种方法有点“摇摇欲坠”,需要为其找到依据,但这是另一个话题。

此外,以这种方式将群聊与常规消息区分开来要容易得多。

 

再一次——提出这样的快速想法可以在适当的UX会议上引发一些有趣的讨论。而且,将其删除并缩小导航栏总是很容易的。





消息窗口

 

从iMessage和其他类似应用程序中得到启发,原来的消息视图已经非常不错。不过,我确实注意到顶部的奇怪的对齐方式,以及高度浓缩的消息是两个主要的痛点。

让我们看一下标题。



与右侧的电话图标相比,原始的返回箭头过于靠近左侧。我知道本机iOS会为后退箭头强制设置一个特殊位置,但是如果我们已经将电话图标放置在距右侧一定距离的位置,那么最好一直进行并自定义导航栏?

 

你知道箭头是否正确对齐?屏幕的左上边缘为整个产品带来了平衡。(在ltr阅读国家/地区,但双方的比边距应该一致,因此rtl的工作方式相同)

因此,再次添加有安全空间的箭头和所有元素,并使用上一个屏幕的左间距和其中一半的间距来重新对这些对象稍微对齐。

在此过程中,我还更改了电话图标,使其变小了一点。




通过明确说明,你可以拥有更好的想法

 

第一条规则是固定网格,比例,字体和颜色。然后,你可以添加一些装饰性调整(例如渐变背景),但这些最初的更改将使你以全新的眼光看待该应用。

 

你的大脑不再需要处理错误的对齐方式,所以它可以利用所有力量来提出更好的UX创意。

 




快速设计→测试→修改

 

这种方法的目标很简单。在你的高级UXers甚至还没有找到他们的一叠彩色的便利贴开始研讨会之前,你已经进行了重新设计,可以在该会议上进行讨论。而它不仅仅是“漂亮的图片”。

 

让某样东西看起来不错,可以让你从它存在的所有其他层面上看,都会更好。

 

不要忘了在同事和实际用户上测试你的假设。这种方法不能代替正确的过程。它只是出现在前面,因为通过自动驾驶工作,你实际上可以想到一些很棒的主意。

 

设计也应该很有趣。


我做了一个视频通话屏幕,一件事接一件事,在接下里的30分钟里,我对分屏视图有了几个不同的概念,还有其他选项等等。

 



现在,将计时器设置为90分钟,然后做点很棒的东西吧!

设计应该很有趣。好玩,探索。


1
阅读原文
|
举报
|
6
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】体育icon
手表表盘UI系列
钱包ui模板
UI界面 组件
3D渐变流体抽象矢量UI背景图
【新年UI图标】旅行icon
【新年UI图标】积分icon
我的钱包-UI界面设计-app
UI通用设计素材1
高级感金属拟物 UI设计组件库
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
新能源APP应用UIKit
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
【新年UI图标】美食icon
新拟态风格 UI设计组件库
UI 登录界面设计模板包
UI应用平面图标
【新年UI图标】汽车icon
【新年UI图标】活动icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册