深入理解UIUE设计的规则
  IOM9DQOlmai3 2023年11月02日 79 0

    UI设计 是指对软/硬件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,UI即User Interface的简称。


深入理解UIUE设计的规则_交互设计

深入理解UIUE设计的规则_UI_02

图片来自网络(仅学习用)

UI设计师的职能大体包括三方面:

   一,图形设计 

          软件产品的产品“外形”设计。

   二,交互设计 

          主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。

   三,用户测试/研究 

          这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。

UI工作流程

   UI接到的工作流程主要产品原型(草图)——交互逻辑——UI/UE设计。也就是说一般ui设计师接到的是原型或草图。有的公司是没有产品经理,更没有交互设计师,那么这些角色都是UI设计师一个人去完成的,出思路、画思维导图、画原型、做交互、动效动画,采集产品竞品与推广策划,所以ui设计的学科广之又广,也是为以后转产品经理,艺术总监作为基础。

ui设计师接到原型草图之后,需要考虑的是:

   1、这样的排布是否合理?(比如960的屏和1136的屏幕、1920到ipad和移动端的是否都可以容下足够的设计关键信息,IOS端的iPhone5、6、7、8、10、11、12、S、plus、X、XS、Xmax 和Android端多种屏幕尺寸)

   2、信息重点在哪里?

   3、用户人群是哪一类?

   4、动效从哪做起?

   5、交互逻辑页面从哪到哪?

   6、弹窗与运营意义何在?

   7、功能与视觉同步到,如何让用户满意?

等等分析。

通常拿到的原型稿是这样子的:

深入理解UIUE设计的规则_UI_03

低保真原型草稿


深入理解UIUE设计的规则_动效_04

思维导图


深入理解UIUE设计的规则_交互设计_05

高保真原型图

 最终设计结果是这样的:

深入理解UIUE设计的规则_交互设计_06

深入理解UIUE设计的规则_UI_07

途家APP


深入理解UIUE设计的规则_交互设计_08

智能停车应用


深入理解UIUE设计的规则_动效_09

tab栏切换效果


深入理解UIUE设计的规则_UI_10

大数据可视化

那么这中间的坑和鸿沟就是ui设计师自己填。

有了以上的思路之后,我们开始着手UI设计:

1、从产品需求入手

        考虑我们到底要用什么主色调。比如同样是团购,糯米用的是桃红色,而美团是芒果黄。那么我们在UI设计的时候首先就要考虑主色调的问题。

 2、配色和辅助色用什么颜色。

         在考虑到产品气质和品牌色的同时,我们经常要考虑配合衬托产品主色调的辅助色。在不同的产品中,辅助色运用的策略是不同的,比如我们经常说的:邻近色、对比色等。都是我们选择辅助色的方法。

3、用什么风格来表达

       说到风格第一反应是扁平化风格。但是在扁平中也有区别。比如下图,同样是扁平。但是上图微微带有一些光影和渐变,而下图是纯扁平。你能说哪个好或者不好吗?不能。


深入理解UIUE设计的规则_动效_11

深入理解UIUE设计的规则_动效_12

同样的信息,在UI的表达上也有不同的表达方式。那么只能在具体你的UI设计中去考虑具体你需要用什么风格。这些都是UI的工作内容。


   4、图标画成什么风格

         同样是设置、发现、首页,不同的app在基本结构一致的情况下也有很多细微的差别。倒是是要用圆角的icon、还是直角,是用面还是线形,这背后的设计语言逻辑是什么,设计目的是什么。都是需要UI设计来考虑。

比如:同样是腾讯的产品,QQ和微信的icon就完全不一样。其原因是由于产品面对的人群不同,QQ更偏年轻化。微信却是灰色系,更偏向于大众,儿童到老年人都适合体验。

   5、如何表达情感化设计

        在一些细节页面我们常常要考虑情感化设计,以此来提升app的品质,降低用户在异常情况下 的挫败感。同时好的设计师还会考虑到如何引导用户去解决,从而满足产品诉求。不同的产品在做情感化设计的时候方式方法不同,风格也不一样。这些也都是需要UI设计来处理的。

深入理解UIUE设计的规则_UI_13

深入理解UIUE设计的规则_动效_14

深入理解UIUE设计的规则_交互设计_15


   6、动效如何做

         因为手机交互是动态的。所以我们如果可以用在一些跳转页面引用动效设计,组件模块之间的交互产生时间过渡,视觉错觉的效果,这样是对整个app加分提高逼格,为用户带来粘性兴趣。

深入理解UIUE设计的规则_交互设计_16

深入理解UIUE设计的规则_交互设计_17

深入理解UIUE设计的规则_UI_18

IOT 动效交互


深入理解UIUE设计的规则_动效_19

动效设计的10条原理

   7、图标icon系列

          一万个人有一万个答案,那么具体怎么做,还是要考虑用户、场景、需求等细节。产品可以提供方向,但是具体的落地还是需要UI设计师来完成。


深入理解UIUE设计的规则_交互设计_20


深入理解UIUE设计的规则_UI_21


深入理解UIUE设计的规则_UI_22


   8、适配、切图

        也算是万年话题了。你不是做个好看的东西,要能用,开发要能开发。你要考虑960的屏和1136的屏幕、1920到ipad,IOS端的iPhone5、6、7、8、10、11、12、S、plus、X、XS、Xmax ,还要考虑不同的安卓720/1080/1280/1920,甚至有些公司要特殊考虑某些屏幕。

深入理解UIUE设计的规则_交互设计_23

交接前工作


深入理解UIUE设计的规则_UI_24

正确的沟通


深入理解UIUE设计的规则_交互设计_25

文字行高规范




最后

   某些公司,UI要肩负和产品经理一样考虑原型设计,交互逻辑的问题。这时候经常需要UI在自己储备足够的视觉设计能力的同时也要良好的敏捷思维,产品逻辑,交互设计能力。此篇文章只为学习参考用。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读