首页 > 其他分享 >提升设计质量:运用五大黄金法则打造卓越的UI界面

提升设计质量:运用五大黄金法则打造卓越的UI界面

时间:2023-07-17 20:56:51浏览次数:40  
标签:界面 视觉 元素 用户 UI 法则 设计 页面

看到好看的设计,随手保存起来,这是设计师的基本习惯。但是如果只是好看,并不能驱使受众真正去了解产品。如果想要用户动心,还是需要了解一些设计心理学,从用户心理去引导用户行为。今天给大家分享一些常用的设计法则帮助你在做设计的时候,更能从用户的角度思考!     连续性法则     将连续性的元素排列起来形成组织关系,能够让用户在阅读时,更加连贯和清晰。目的是为了驱动用户完成操作。比如左滑可以看到更多的卡片,通过连续性的方式进行引导告知用户隐藏的部分。 例如:导航分类、列表、轮播图、卡片都有运用到这种法则。这一设计法则能够提示用户查看更多信息。   ⬇⬇⬇复制下方链接获取设计素材 https://js.design/community?category=explore&source=bky&plan=bbqbky764         相似性原则     我们的视觉感官会把相似的元素联系在一起,主观认为这些元素有同样的意图,所以在设计相同状态或相同功能的元素时,需要保持视觉的统一性,让用户认为是一样的功能按钮或模块。当看到导航栏下方的图标,因为形状大小相似,用户会认为它们的功能属于同一类型,并且能够点击。       邻近性原则     我们的眼睛会把相邻的内容组成一组,从而减少内容带来的阅读压力。这是设计中必不可少的排版方式,特别是 面对复杂的信息流页面,经常会运用邻近性方法进行设计,以保证信息传递的更加有条理性。在设计的时候,利用间距将元素组合在一起,这种方法通常会使用在内容信息、卡片、横幅中。在app评论页面中,元素一般较多。通过大间隔来区分不同人发的内容,再用小间距细分内容的关系。             对称性原则 对称的图形会让受众感觉稳定可靠。在界面设计中为了提高稳定性通常会运用对称法则进行设计。但是过度的使用对称也会让人感觉单调和乏味,所以需要合理地运用对称性法则。   这个法则通常会使用在焦点图、产品展示、列表、导航中。这款app的主屏幕布局讲究对称,用户在打开时可以迅速准确地找到自己所寻找的信息,同时画面协调且对称。app对角线设置了圆形元素和文字布局,让视觉更加平衡。     焦点性原则   通过增加对比度放大元素来引起注意。目标是让用户关注到页面的信息,从而引导用户关注关键信息。特别是,焦点用于细节页面或者提示框。视觉焦点就是在界面中占主导地位的视觉元素,第一时间进入你的眼睛。该界面中作者通过色块来强调重要的日期选项记事,这样能吸引用户的注意力,关键的重要元素高亮显示。     这些设计原则都是通过设计指导帮助用户。通过规则影响用户的行为,控制用户的使用路径以达到设计的目的。一个好的设计来自细节,也来自用户的想法。设计过程要关注用户反馈,避免不良体验,积极引导用户情绪,打造更好的产品。    

标签:界面,视觉,元素,用户,UI,法则,设计,页面
From: https://www.cnblogs.com/zzbbq/p/17561190.html

相关文章

  • 登陆页美学:探索如何利用色彩、布局和元素打造令人惊叹的UI界面
    今天,我们从移动APP产品经理或者UI设计师的角度再来聊一聊APP登录设计方式和如何去设计这些有意思的APP登录模块。 1、熟悉目前常见的手机APP登陆方式①账号登陆(手机、邮箱)②第三方登陆(微信,QQ,微博)③一键快捷登录(工具类,如不记单词)④游客登陆(bbs)⑤demo测试登陆(如友盟等......
  • 【雕爷学编程】Arduino动手做(164)---Futaba S3003舵机模块2
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • Stable-Diffusion-webUI 代码阅读01 —— 从启动开始
    Stable-Diffusion-webUI代码阅读01——从启动开始由于实习工作需要,决定用几天时间阅读一遍stable-diffusion-webui的代码。本文参考知乎专栏,并且做出了一定程度上的改进,感谢大佬!知乎专栏:自动做游戏:AI技术落地于游戏开发-知乎(zhihu.com)最近工作主要侧重于OneFlow框架应......
  • 基于Avalonia 11.0.0+ReactiveUI 的跨平台项目开发1-通用框架
    基于Avalonia11.0.0+ReactiveUI的跨平台项目开发1-通用框架Avalonia简介:Avalonia是.NET的一个跨平台UI框架,提供了一个灵活的样式系统,支持广泛的操作系统,如Windows、Linux、macOS,并对Android、iOS和WebAssembly提供了实验性支持。为什么使用Avalonia:之前已经了解了基于Avalon......
  • Axure RP Extension for Chrome 免安装查看原型界面
    AxureRPExtensionforChrome免安装查看原型界面在没有安装AxureRP软件的情况下,想要打开原型文件时,需要在谷歌浏览器中安装`AxureRPExtensionforChrome`插件,其实在原型文件中就可以找到此插件。1.随便找一个原型设计。打开原型文件->resources->chrome->axure-ch......
  • 【雕爷学编程】Arduino动手做(163)---大尺寸8x8LED方格屏模块7
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • ElementUI——日期范围选择得快捷选项
    前言element-ui的日期范围的快捷选项;内容pickerOptions:{shortcuts:[{text:'今天',onClick(picker){constend=newDate()conststart=newDate()picker.$emit('pick',[start,end]......
  • 【雕爷学编程】Arduino动手做(163)---大尺寸8x8LED方格屏模块6
    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题......
  • Sketch UI绘图设计软件 Sketch 中文 Sketch下载
    Sketch是一款专业的矢量绘图软件,主要用于UI/UX设计和界面原型制作。它在设计师和开发者之间非常受欢迎,因为它提供了丰富的工具和功能,使得设计过程更加高效和流畅。Sketch中文破解版下载 以下是Sketch软件的一些主要特点和功能:矢量绘图:Sketch基于矢量绘图,可以创建高质量的......
  • ArcEngine调用GP工具(含界面)
    GP工具是ArcGIS的精髓。在开发时,可以通过调用所有系统的GP,也可以调用自定义的GP。除此外,居然也可以直接调用GP工具的界面。操作方法如下:privatevoidbutton1_Click(objectsender,EventArgse){//创建GPToolCommandHelper对象IGPToolCommandHelper2gpToolCommand......