广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

UI设计如何更吸睛?平面12细则超全指导

发布日期:2025-04-25 09:07:11 浏览次数: 1160 来源:行空XKdesign

初入职场是否有困惑过自己的设计平淡,不够抓人眼球。本期讨论下设计基础理论中的造型质感配色排版画面故事是怎么影响视觉体验的,以及如何设计更有吸引力?
01 造型质感
曲线直线:点线面是设计基础构成,其中线分为直线、斜线、曲线、折线等,不同形态带给用户的心理感受也各有不同。线具有引导性&分割性,巧用线可以增强视觉体验,其中曲线更能表现活力和动势,由曲线主导的设计更吸睛。

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

线和面:设计中线条过多容易破坏画面整体性,增加视觉噪音,因此多用面可以提升用户视觉体验。
圆角和直角:依据格式塔心理学的同形联想,我们可以了解到,带弧度的圆角比尖锐的直接更具有亲和力,可以减少用户的视觉压力。
在UI设计中有嵌套圆角时需注意弧度,才能更和谐。
拟真质感拟真质感建立现实世界联结,更吸引用户。在设计前期可以从现实生活中提炼相关造型元素和质感纹理。

UI中的基础控件按钮,也是从拟物到扁平再回归轻拟物,还发展出多种轻质感。当然控件质感还是要根据需求场景进行设计,避免喧宾夺主。

02 配色
颜色有色相明度纯度属性,常规配色方式有同色系配色、邻近色配色、类似色配色、中差色配色、对比色配色、中性色配色。而除此外,色彩情绪也需要考量
色彩情绪是指不同频率色彩的光信息通过视觉神经传入大脑后,经过思维,与以往的记忆及经验产生联想,从而形成一系列的心理反应如冷暖感是从外在到内在,从生理到心理的转换。依据产品调性选择合适色彩,去传达品牌情感,可以让设计更具吸引力。
色彩冷暖:暖色系以红色、橙色、黄色为主;冷色系以蓝色、青色、青绿色为主;而处于二者之间的绿色和紫色为中性色系。
色彩进退:一般暖色系、高明度、高纯度的有前进感;冷色系、低明度、低纯的有后退感。
色彩膨胀:一般暖色系、高明度、高纯度的有膨胀感;冷色系、低明度、低纯有收缩感
色彩软硬:一般暖色系、高明度、低纯度的越软冷色系、低明度、高纯度的越硬。
色彩轻重:色彩的轻重感主要取决于明度,明度越高感觉越轻,明度越低感觉越重;纯度次之,一般来说高纯度的色彩感觉较重,低纯度的色彩感觉较轻。

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

03 排版
信息块:视觉元素有图片、文字、视频等,单个或多个信息可以组成信息块,信息块化有利于信息逐步获取。一定程度信息块越大数量越少视觉观感更近,简而言之勿过于碎片化。一般来说图片元素优于文字元素。
其次界面设计中信息块的分割方式采取面性卡片间距区分优于分隔线,这也是视觉上让信息块更大,因为分隔线容易破坏整体性。同个信息块层级区分除了上述方法外,还可以用大小、颜色对比。

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

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

版面率:是指页面信息内容相对页面的占比,版面率低则留白多,版面率高则留白少。一般来说版面率高的画面更热闹亲切(吆喝起来),版面率低的画面更清冷高级(爱搭不理),可以根据设计需要进行选择,电商促销建议选择版面率高。
视觉导向:不论是平面还是网页界面设计都有视线移动方向,简称视觉导向。视觉导向有以下6种,水平、垂直、斜向、曲线、核心和导示视觉导向。
水平视觉导向,画面元素引导视线水平从左至右,水平排列构图就是简单的水平导向,在核心信息元素较多时也能排列清晰。

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

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

核心视觉导向,同单纯视觉焦点不同,核心导向的视觉感受更强烈,画面有种向心或离心感。而视觉焦点则通常结合上述其他视觉导向进行剩余信息排列设计。核心视觉导向建议用于海报、banner和活动页头图中。
导视视觉导向,在平面版式中有意识的利用图形、文字动线等引导用户按照预设好的方向进行阅读,更像辅助手段,上述其余视觉导向中均可结合元素引导视觉动线,此处不再举例。
04 画面故事
企业IP应用:IP是打造品牌人格化有效手段,可以传达品牌价值观,建立产品和用户情感链接。企业IP需要注意,形象贴合产品,建立表情着装动作动态风格规范。线上场景可以应用在logo图标,启动页、个人页、会员中心、空页面、弹窗等配图,各类运营位,挂件,表情包和虚拟助手等等。  
← 滑动查看更多 →

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

概念化:将整个产品赋予一定的故事概念,可以结合IP进行全方面设计,如阿柴记账、trader joe‘s线上复古商店、专注旅人等等。
也可以将产品局部页面赋予一定的概念如淘宝下拉页面进入二楼。

如何将平面设计理论运用在UI设计中来打造更吸引人的设计,就分享到这儿~戳姊妹篇《游戏化设计,打造更吸引人的运营视觉》可回顾,从《八角模型》心理学角度思考吸引人的产品(运营)设计要点。


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询