恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
平面理论告诉你,如何提升UI质感
34.2°
2024-06-03 原创文章 经验/观点 举报 8390 5 0 0

初入职场是否有困惑过自己的设计平淡,不够抓人眼球。本期讨论下设计基础理论中的造型质感、配色、排版、画面故事是怎么影响视觉体验的,以及如何设计更有吸引力?

一、造型质感

1、曲线和直线

点线面是设计基础构成,其中线分为直线、斜线、曲线、折线等,不同形态带给用户的心理感受也各有不同。线具有引导性&分割性,巧用线可以增强视觉体验,其中曲线更能表现活力和动势,由曲线主导的设计更吸睛。

曲线在UI中应用也很多,比如将节奏、数据可视化,作为基础图形可以在背景图中使用,结合动效增强视觉体验感。

2、线和面

设计中线条过多容易破坏画面整体性,增加视觉噪音,因此多用面可以提升用户视觉体验。

3、圆角和直角

依据格式塔心理学的同形联想,我们可以了解到,带弧度的圆角比尖锐的直接更具有亲和力,可以减少用户的视觉压力。

在UI设计中有嵌套圆角时需注意弧度,才能更和谐。

二、配色

颜色有色相明度纯度属性,常规配色方式有同色系配色、邻近色配色、类似色配色、中差色配色、对比色配色、中性色配色。而除此外,色彩情绪也需要考量。

色彩情绪是指不同频率色彩的光信息通过视觉神经传入大脑后,经过思维,与以往的记忆及经验产生联想,从而形成一系列的心理反应如冷暖感,是从外在到内在,从生理到心理的转换。依据产品调性选择合适色彩,去传达品牌情感,可以让设计更具吸引力。

1、色彩冷暖

暖色系以红色、橙色、黄色为主;冷色系以蓝色、青色、青绿色为主;而处于二者之间的绿色和紫色为中性色系。

2、色彩进退

一般暖色系、高明度、高纯度的有前进感;冷色系、低明度、低纯度的有后退感。

3、色彩膨胀

一般暖色系、高明度、高纯度的有膨胀感;冷色系、低明度、低纯度的有收缩感。

4、色彩软硬

一般暖色系、高明度、低纯度的越软;冷色系、低明度、高纯度的越硬。

5、色彩轻重

色彩的轻重感主要取决于明度,明度越高感觉越轻,明度越低感觉越重;纯度次之,一般来说高纯度的色彩感觉较重,低纯度的色彩感觉较轻。

6、情绪参考

不同场景下色彩情绪有所差异,传递的情感是不固定的,即同个颜色也可能有积极消极两面。比如「红色」联想到火焰是危险、警示,而联想到成熟果实、怒放鲜花或节庆又代表喜庆、热烈。

三、排版

1、信息块

视觉元素有图片、文字、视频等,单个或多个信息可以组成信息块,信息块化有利于信息逐步获取。一定程度信息块越大、数量越少视觉观感更近,简而言之勿过于碎片化。一般来说图片元素优于文字元素。

其次界面设计中信息块的分割方式采取面性卡片或间距区分优于分隔线,这也是视觉上让信息块更大,因为分隔线容易破坏整体性。同个信息块层级区分除了上述方法外,还可以用大小、颜色对比。

2、跳跃率

人眼获取信息会先从最大最显眼的元素开始,再逐级发现其他元素。这种大小上对比幅度在平面设计中称为元素之间的跳跃率。

同理界面设计中不同信息块做大小对比也能增强视觉体验,但需注意场景避免过于抢眼,一般在内容首页或推荐页中使用。

3、版面率

是指页面信息内容相对页面的占比,版面率低则留白多,版面率高则留白少。一般来说版面率高的画面更热闹亲切(吆喝起来),版面率低的画面更清冷高级(爱搭不理),可以根据设计需要进行选择,电商促销建议选择版面率高。

4、视觉导向

不论是平面还是网页界面设计都有视线移动方向,简称视觉导向。视觉导向有以下6种,水平、垂直、斜向、曲线、核心和导示视觉导向。

水平视觉导向,画面元素引导视线水平从左至右,水平排列构图就是简单的水平导向,在核心信息元素较多时也能排列清晰。

垂直视觉导向,画面元素引导视线垂直从上至下排列,结合倒三角图形背景或俯视视角可以巧妙进行视线引导,常见于文字数据可视化类海报或H5。

斜线视觉导向,和水平垂直导向类似。曲线视觉导向是元素呈曲线或非规则排列,虽不如水平或垂直导向直接明了,但结合明度大小对比、人物视线、文字动线来引导视觉动线后可以明确信息层级的同时增加画面动感。

核心视觉导向,同单纯视觉焦点不同,核心导向的视觉感受更强烈,画面有种向心或离心感。而视觉焦点则通常结合上述其他视觉导向进行剩余信息排列设计。核心视觉导向建议用于海报、banner和活动页头图中。

四、画面故事

1、企业IP应用

IP是打造品牌人格化有效手段,可以传达品牌价值观,建立产品和用户情感链接。企业IP需要注意,形象贴合产品,建立表情、着装、动作动态、风格规范。线上场景可以应用在logo图标,启动页、个人页、会员中心、空页面、弹窗等配图,各类运营位,挂件,表情包和虚拟助手等等。  

2、动态设计

基于设备硬件陀螺仪、重力感应等传感器的引入,视觉设计不再单一,如滚动视差、悬停视差、陀螺仪裸眼3D,即发生交互行为时改变当前所见元素(元素可以是图片、按钮、导航组件等等),让静态画面动起来,更具有故事性和趣味性。

3、概念化

将整个产品赋予一定的故事概念,可以结合IP进行全方面设计,如阿柴记账、trader joe‘s线上复古商店、专注旅人等等。

也可以将产品局部页面赋予一定的概念如淘宝下拉页面进入二楼。


Powered by Froala Editor

更新:2024-06-03

收藏

5人已收藏

行空设计

持续分享设计干货

  • 39

    作品

  • 24

    粉丝

  • 14

    关注

  • 弥散风蛇年海报教程
  • 轻质感等级勋章教程,超细节
  • 1500+大厂24节气海报,不重设计灵感(附资源)
  • 大厂多巴胺配色秘诀,11个案例讲透

    猜你喜欢

      2024-06-03 原创文章 经验/观点 举报 8390 5 0 0

      平面理论告诉你,如何提升UI质感

      34.2°

      你确定要举报平面理论告诉你,如何提升UI质感

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年05月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录