赞助商
立即赞助

用五年经验换来的,超实用 UI 设计四原则!

UI设计3年前 (2021)更新 流光
2.6K 0 0

从少到叔,只用了5,还记得我刚入职的第一份作的导师我:「设什么捷径,的只多看、多、多,逻辑思维明确了,思清晰了,累积多了,项目方案就好解决了」。5的作中,也累积了一些得,下面就家聊聊我对 UI设的几点得一些启发。

文章目录

  • 想、看、做
  • 思维清晰
  • 逻辑流畅
  • 沉淀积累
  • 总结

多想、多看、多做

1. 产思路要吃透

详细地分析需求,设计师更好的把握产的思路。多看需求中交互或产给的产流程图,在初步的交互结构图中,可根据需求大致的构页面的布和版,把页面容布和版记入心中,为整个项目打一个埋点,为将来设计创作时设计参考打好基础。

用五年经验换来的,超实用 UI 设计四原则!

2. 换位思考很重要

分析需求时,需要更的站在互或产品经理的角度上去看待问题,看互流程图,想产品的逻辑思,消化互(产品经理)的整个产品引导意向。例之前小编做的一个案例,项目为智能家居管理和操控的 APP,在页面里有搜索框,但是基司身的业务和硬件接最就二个左右,两三屏的滚动查看就看完,对身的搜索意义不大。但对产品经理,在产品的延伸和前瞻来看,功能必须要有,所以产品的意图和产品经理的思路,我做出下的修改:

用五年经验换来的,超实用 UI 设计四原则!

把搜索框隐藏来做为按钮,当用户需要时点击按钮,跳出搜索内容界面,样就以把屏幕空间留给主要功能展示,同时让页面局严谨不零碎。

思维清晰

1. 析用户使用人群

在做产品之前,首先要析产品内在需求和使用人群,为了更好的对用户动机深挖,最好搭建产品架构析图和目标用户动机析图,这带逻辑性地去析,对于前期做计推导和产品初步的风格落实起更好的数据支撑。例如下面就是队对于现有的一个 APP 功能深挖的析图以及一些目标用户的行为析。

用五年经验换来的,超实用 UI 设计四原则!

把一些点列出来,预估会发生的事件,预估产品因为事件的向,以及功能使用景指向等发生的事件都例举出来,这对于定义视觉风格更利于站在用户角度考虑用户需要什,立的风格对用户行为动机产生什响。

2. 析产品功能属性

对于人,往往根据的性格、年龄、扮,职业等,给贴上标签属性。例如一个生扮性,会给她贴「御姐范」。年纪扮可爱的会贴属性「萝莉」「软妹」。同产品也是有对应的属性之,一个产品往往根据身主功能来归属的标签属性。例如产品有专属固定职业使用的称为工类app;有享、语音、人人之间互动的称为社交类app;集采购、买西的称为商类app。这些种种的类别属性划,在这个类别下还有细属性的划,往下延伸引导。例如这个app是社交类的,那它的主是「男性」?「性」?「性」?「老年人」?「年轻人」?如果确定是性那主的是什年龄层次性,是「15-25」?「25-35」?「35-45」?这些等等的往下细属性,面对­­这可以用一个思维导图析,深入剖析想要的数据。

用五年经验换来的,超实用 UI 设计四原则!

这一层层深入挖掘析,最后理的得出使用人群的偏好、属性、使用景,这带逻辑的一层一层往下对于定义一款新的 App 产品的计风格有更确的指引作用。

逻辑流畅

1. 把握页节奏

音乐节奏会带动心情高低起伏,那么什么是页节奏呢?我们说页节奏是指我们页布局怎么去分割,予用户什么样视觉体验,让用户第眼看到什么,第眼知有什么,第三眼发现什么,都是我们视觉思路明确带着用户去体验。

在层关系上,要拿捏规划好,主推功能内容和附带功能内容还有运营需要达什效果,都是需要确的思路带用户往下的,下面是编之前做过的一个案例:

用五年经验换来的,超实用 UI 设计四原则!

公的主产品是硬件销,而且星产品是路由器,所以才衍生了这个共享Wi-Fi app,硬件用户基数比较大,所以主要是购买了的路由器都可以下载这个 app,把家多余的 Wi-Fi流量享出去得一些报酬。

在表面上我们看似是一个共享功能的app,其我们的潜功能目的是为通 app 把用户导购买硬件,所以在主要页面上我们把告位特别突出,弱化主要的连接功能,让用户使用连接功能时先看到优信息,同时文案引导去连接Wi-Fi的用户,让其产生疑问「干嘛不自己买个路由器去分享Wi-Fi增加收益」的心理动机,所以在页面视上我一眼让用户看见告,二眼道有Wi-Fi连接功能,三现怎么去使用我们Wi-Fi功能,样一步一步让用户跟着我设计思路的节奏走。

产逻辑思路明确,户就会知道他处在当前位置应该操作么,一步该做么。

2. 尊敬交互逻辑

在赛上,我们说要尊敬对手,实在共事中,我们需要尊重交互设计的互流程图,不要随意更改互逻辑,果产生歧义要合理沟通,找决方案,所以时我们在前面讲到的在产品分析上透产品需求,以从产品上出和互探讨,目的达到一致才以更改。果我们只是为视上的效果看而去更改互,让整个 app 互处不流畅、不合理是不对的。

小编曾经碰到一个转的 UI设计师,因为页面有很多择项的功,需要一一择点击弹同弹给户择对应的容,因为择项的功较多。在页面布上好对齐和平衡,结果他把几个同功择的弹组件合成一个,在弹择的组件上择项分区,这样做后在户角上,户择了第一个功项却把面的未知功都择了,模糊了户当前使位置,户陷入了知一步怎么操作,怎么往走,这种交互中断的UI是合的。因为现有的app,很多户的使习惯已经成惯性的逻辑思维,我们想创交互,必须在现有的基础上改良或修改,而且是必须合的,这样才会户在使产过程中产生疑惑或焦虑。

视觉设时,我们设师应该跳出设思维的误区,不我们设把页面好看就可以了,其他的不我负责的就不了,往往这样错的,把页面得好看我们的基本责任,把页面得好看又好用我们达到的终目标。所以我们设师应该多学习交互逻辑熟悉产品思,这样出的作品灵魂的。

3. 规范细化

规范对于我们设的核就灵魂,视觉游对接交互(产品理),下游对接发人员,它都起到阐述设的规范化、统一化,让外人可以读懂我们设的逻辑思。

规范细化在交接工作也会起到高效率沟接梁,所以在设计好页时我们应该细化地理输出份设计规范,规定「标题」「副标题」「正文」等系列共使用组件大小、状态、距都是有共性,逻辑性,这样开发在写页过程知我们设计规范里共,在实现页会有底,知注意哪些号用多少,距是多少等等,我们后期验收工作也会减少很多劳动力。时在我们设计与程序慢慢地立合作默契,完成以后工作任务也到事半功倍效。

沉淀积累

1. 关注用户数据反馈

项目的线不意我们的任务已完,打造一优秀的app 不断迭完善的,app线后真的接触了用户,用户的使用数据反馈检验我们劳动果的真实证据。

上线后我们设计需要多关注用户使用数据,关注功能击率和留存率,多查看app商城用户评分,认真看反馈评论和后台收用户意见,这些最贴近用户真实反馈,累积下来处理,是我们下迭代动力,这样步步根据用户体验去优化品,才是真正意义上个优秀app品。

2. 做好项目结

所谓结写好,加分又加奖,设计师必须把自己做项目设计思维表出来,把自己设计所踩坑、埋坑,条理分明例举出来,避免下迭代和其他项目再犯样误,时项目亮也可以记录说明,这样下再做项目,吸取前成功经验,避开踩过坑,更利于我们做好个品,提高工作效率。

总结

以上几是小编在工作血与泪教训出经验。UI设计与其他视觉区分可能是更多考虑可玩性、使用性、耐用性,比视觉第冲击力要。

欢迎关注作者「京东设计心JDC」微信公众号:

用五年经验换来的,超实用 UI 设计四原则!

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

相关文章

从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计
编者按:看似简单的投影,在高手眼里有千万种变化。不信看看今天这篇文章,让资深设计师教你做投影设计! 在今天的 UI设计中...
APP UI
橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长...
ui设计
在做设计时,经常为该使用网格还是列表所纠结,一直想找资料来深入了解下这两者的区别。为此呢,我找到了这篇文章,文章作者...
APP界面
目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
@Mockplus原型设计 :如今,越来越多的优秀 iOS 应用程序、MacOS 工具和网站争相出现,用户对产品质量的要求也水涨船高。在用...
ui设计