当前位置: 首页 - 技术教程 - 改善 UI 视觉体验的7个提示

改善 UI 视觉体验的7个提示

2019-04-15 作者: 库外 浏览: 167


UI设计过程中有许多技术不需要深入的设计知识,但它们可以使您的UI和Web界面看起来显着改进。  

改善UI视觉体验的7个小技巧

也许你是一个新手设计师,也许你是一个开发人员,有很多开发经验,但有必要让你设计的页面和UI看起来更像这样,至少不是外行人的笔迹。  

那么今天的文章应该能够帮助你。 UI设计过程中有许多技术不需要深入的设计知识,但它们可以使您的UI和Web界面看起来显着改进。 为了改善设计,这个问题的经验和技巧往往会减少绕道而行。  

闲言较少,让我们仔细看看下面。     1.按钮颜色突出显示的重要性

当给用户多种选择时,可以通过颜色传递的情绪是正面的还是负面的,并且可以快速且容易地设计。  

[6]  

事实上,红色和绿色按钮的颜色含义已经跨越物理世界和数字设计,我们每天都可以看到许多类似的实体产品设计,包括交通信号灯,警告标志和物理按钮。  

绿色表示通过,红色表示禁止。 如果用户需要购买渠道,您希望感兴趣的用户快速点击而不是取消。  

此外,如果您的网站或APP涉及不同重要性的多个交互,您可以使用颜色填充进一步区分层次结构,还可以使用按钮来标识相应的文本标签内容:  

改善UI视觉体验的7个小技巧

这是一个简单的例子,一个颜色填充的按钮,一个鬼按钮(没有颜色填充,边框),以及一个无边框,未填充的按钮来区分。  

在少数情况下,还应突出显示对系统有重大影响的破坏性或限制性按钮,但红色可用于强调和警告。 此时,相对“非负”按钮被认为是不太重要的操作:  

简而言之,事实上,用户使用区分按钮的核心是感知,而不是复杂的逻辑判断。 设计的基本规则在上面,但更重要的是,它们基于情感和感知设计。     2.按字重和光影分类

特别是,在构建文本内容的可视层次结构时,可以使用许多属性,并且仅使用大小差异生成它太单一。  

在许多情况下,您可以区分颜色,字重,浅色和深色。 我们可以让它变得更重想要更大的文字,更粗的字体,更清晰的颜色,或使用更深的黑色来渲染。  


以集成方式使用这些属性来构建可视层次结构。  

3.带有白色叶子的隔离元件

这两个要素是无关紧要的。 如果你想将它们分开,使用分界线似乎很自然吗? 当然,但这种方法确实是一种非常过时和笨拙的方式。 您需要的是更好,更优雅,更灵敏的演示。  

您可以使用白色或负空间来分隔,而不是简单地使用分割线。 这条线在很大程度上是丑陋和笨重的视觉噪音,相对而言,它们更好地美白它们。  

改善UI视觉体验的7个小技巧

在大多数情况下,删除单独的行是一种更快的方法,当然,您通常需要适当调整白色大小。  

使用分割线分隔内容不仅需要更长的时间来扫描页面,而且还会增加影响整个层次结构的信息噪声。     4.用阴影替换边框

要突出显示某些元素,您不一定需要依赖笔画。 使用阴影可以产生相同的效果,单独使用它们看起来更干净。 中风阴影可能看起来太乱了。  

使用相对不那么激进的小阴影无疑会使效果更容易,而且看起来不会突然。  

[6]  

登录表格     5.使用色带改善视觉色调

如果您认为内容块过于单调,则可以为您的目的增强块的可视属性。 在内容区域的一侧添加颜色条以增强视觉属性,同时为块的内容赋予情感。  

颜色条可以是单色或渐变,具体取决于您想要传达的视觉体验类型。 此颜色条也可以具有良好的功能。 当然,这主要用于相对素食的页面,如果页面本身已经很花哨,则不太可能被使用。  

改善UI视觉体验的7个小技巧

例如,使用红色和绿色标识不同的状态,或使用颜色条标识触发的选项卡或控件。     6.区分具有背景颜色的块

事实上,为了区分内容块和层次结构,这种方法同样优雅和快速,并且几乎可以是一种毫不费力的设计技术。  

为了区分两个不同块的元素,还可以使用不同的背景来区分它们。 从本质上讲,它使用类似卡片的设计概念来对不同卡片的内容进行分类。  

相对而言,使用不同但不太重要的色块作为背景在区分同时确保整体清洁方面起着重要作用。  

7.“言语”尽力而为

谁不喜欢漂亮的字体? 当然,我喜欢它,但字体的功能实际上是不同的。 从呈现文本的高度可读文本到高度装饰性的视觉字体,不同的字体需要处理不同的功能。  

快速浏览几种不同类型的字体:  

(1)Serif字体:Serif本身是serif的意思,这种字体字符的末尾通常有一个小的装饰性衬线。 除了装饰性,衬线增强了字体的可读性。 常见的衬线字体:格鲁吉亚,Times New Roman,Cambria。  

(2)非serif字体:它是Sans-Serif字体,相对更现代。 移除衬线后,线条更强,更清洁,更适合数字时代的某些显示需求。 常见的非衬线字体:Helvetica,Montserrat,Gotham。  

人们通常认为衬线字体更适合长期阅读,而且它们更多地用于印刷品。 然而,衬线字体的衬线和角落大多更锐利,并且在某种程度上将被视为视觉噪声。 在屏幕分辨率仍未达到标准的时代,衬线字体的显示非常成问题。 当然,在屏幕分辨率提高后,这个问题几乎不存在,但它仍然存在于小字体和低分辨率和小屏幕中。  

(3)手写字体:手写字体通常被认为是手写样式字体。 在呈现时,通常会以连续的方式书写笔画,这更接近传统书写字体的效果。 手写字体更随意,更有趣,常见的手写字体包括:Alex Brush,Great Vibes,Sofia。  

(4)显示字体:显示字体是一种面向功能的分类,通常是指用于标题显示的字体,用于海报,徽章等,它们更具表现力,更突出的视觉特征,直言不讳 用户的关注。 常见的显示字体包括:Algerian,Curlz,Gigi,Umbra。  

改善UI视觉体验的7个小技巧

在网页设计中,大多数时候只使用serif字体和非serif字体。 在英文网站中,serif字体通常用于匹配非serif字体。 请注意,如果您的字体具有不同的权重和权重,则最好在同一字体系列中使用字体。 在中文中,开源和免费商业“思源黑体”和“思源歌”是设计中非常普遍的选择。  

在视觉设计中,我坚持使用2种字体,很少使用3种字体。 后者最多会强调视觉效果的商数。用于工业或艺术项目,如横幅和海报。   

  结论

我真的希望这些技巧可以帮助你做出好的设计,无论你是设计师还是其他专业人士。 很多时候,设计是灵活的,它基于感知,并且有方法可以遵循它,特别是如果你仔细观察一些现有的好设计,你会发现很多这样的技巧。 观察共性,仔细感知,总结经验,你也可以。  


版权免责声明 1、本网站名称:库外网
2、本站永久网址:https://kuwai.vip
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效请反馈给我们!我们会第一时间更新。

评论
本文作者 阅读排行 文章推荐