侵权投诉

改善优化网站UI设计的七个技巧

2021-01-03 14:51 ? 次阅读

你对自己的网站当下的UI设计效果满意吗?如果不知道如何改进的话,那么这篇文章或许对你有很大的帮助。

据统计,成年人平均每天在手机上花费3到4个小时。尽管大家不懂如何创建APP或网站,但却能明显感知一个产品设计的好坏。这可以很明显的映在产品使用时间上,并且很大程度可以归结为直观的用户体验和可能被忽视的UI界面。

如今,UI设计是建立网站或应用程序用户信任的重要组成部分。优秀的UI设计,带有清晰、熟悉的图标,一致的调色板,尺寸大小,可以让用户快速、轻松地浏览页面内容。

修改现有的网站或应用程序设计可能会面临很多障碍,但你完全可以做一些小事情,让UI设计达到一个新的水平。无论是在你的图形、调色板、网站导航工具、图标、字体大小和间距上,你的UI设计总有需要改进的地方。

在本文中,站长之家将跟大家分享7种简单的方法,让你的应用程序和网站UI设计经过简单的调整之后,在视觉上更吸引力。

字体的使用要克制

使用的字体并不是越多越好,最好只使用一种字体。我们建议使用无衬线字体,如Helvetica。因为它更易于阅读,并且在小屏幕和大屏幕上的展示都比较良好。

通常可以在不同位置进行调整。例如,标题(H1)可以是粗体,或者采用比常规文本(p)更粗的字体,而常规文本则采用普通字体,也以尝试用颜色来区分和建立层次。

当然,你还可以在设计中使用两种字体(一种用于标题,一种用于其他文本,比如段落,标题等等)。我们很少在设计中看到两种以上的字体,但出现这种情况时,是有一定原因的。

比如下图中,使用字体过多,导致页面观感混乱。

改善优化网站UI设计的七个技巧

内容的可读性

如果页面上的文字和背景图片在颜色上过于相似,那就无法突出文字内容。结果就是不利于用户阅读,要么就是快速浏览,要么干脆跳过这部分内容。

而这个问题很容易解决。首先,在图片上添加一个覆盖层,根据字体颜色,调整背景图片的明亮程度,也可以通过调整图像的透明度来达到类似的效果。实现这一点的另一种方法是在文本周围添加阴影。

检查内容的对齐方式

在决定如何阅读内容时,,对齐起着至关重要的作用。大家很少会看到长格式文本居中或向右对齐,博客类或长文本内容更是如此。统一将文本左对齐是一个比较稳妥的做法,而不是选择居中方式。

请注意,在某些情况下,居中文本仍然是合适的。一些例子包括小标题或段落,引用等等。

颜色使用需谨慎

虽然颜色在传递信息方面非常有用,但要谨慎使用,而且只在你试图传达内容中最重要的部分时使用。

例如,对于一篇博客文章,你不会将所有文本都设置为亮绿色。颜色对于定义设计层级是非常重要的,比如可以降低不太重要的文本的饱和度,从而突出想要抓取眼球的内容。

最后,我们建议设计之前,要保持颜色的一致性和定义调色板。颜色的组合有数百万种,你可以花几个小时来测试哪种灰色比较好看,或者哪种紫色比较适合你的设计页面。虽然这可能很耗时,但值得去尝试,如有必要的话,就作出改变。

留白跟内容是一样重要的

留白对于内容的可读性非常重要。过于聚集的文本和图片会让用户感到不适,而过多的空白会导致读者需要过多的滚动,从而在无法快速浏览并产生挫折感。

要给内容足够的呼吸空间。在页面发布之前,请确保在不同的设备上测试留白,以确保可读性。

对于大多数字体来说,1.5到1.625的行高是一个比较稳妥的选择。

设计模式要为品牌标识起补充作用

在界面创建一个全新的点击或滚动模式是不必要的,通常不会给用户留下深刻印象。

应该使用用户熟悉的模式,例如在网站顶部添加导航栏(在大多数网站上都能看到),而不是在底部列出网站的功能,让用户需要滚动才能找到这些功能。

设计保持一致性

应该保证你的设计在所有渠道都保持一致性——包括网页,应用程序,移动端,社交媒体账号等等。

当用户访问你的网站或查看社交媒体资料时,应该给他们一致的熟悉感。尽量保持颜色和字体的一致性,这会让受众更好地联想到你的产品和品牌。也可以确保用户在点击你的网站时不会感到困惑。

总而言之,在UI设计方面,可以经常问自己这些问题:

用了多少种字体?

(如果超过一种字体)是否可以简化网站,或者在页面上限制字体效果更好?

图片上的文字是否易于阅读?可以在不同的设备上读取吗?如果答案是否定的,那么给图像添加一个覆盖层。

网站的哪些部分居中?把它移到左边是不是更好看?(要注意的是,要根据设备调整对齐方式。比如在手机端上居中效果可能比较好,但在较大的显示器上左对齐可能比较好。)

用了多少种颜色?一个个尝试使用更多或减少颜色,并尝试限制彩色文本的使用。

段落和图片间隔空间是否合理?尝试增加或减少留白的数量,以改进原有的设计。

所有的页面或帖子都有相同的导航吗?尽量让滚动和单击模式在整个面板上保持一致。

所有的页面设计是一致的吗?如果不是,试着保持所有页面的颜色和布局一致。

以上就是改进UI设计七个要点,希望对你能有所帮助。
责编AJX

收藏 人收藏
分享:

评论

相关推荐

直播预告|SSL云,助力“智”时代,构筑新安全
随着互联网经济蓬勃发展,“数智化转型”成为所有企业在发展过程中必选之路,在企业转型升级过程中,如何保....
发表于 10-15 16:07 ? 17次 阅读
星速,何以成为全网浏览新宠?
如今,浏览器的使用已经成为人们每天必不可缺的一部分,有什么疑问,所要了解的知识,吃得“瓜”,用浏览器....
发表于 10-09 11:11 ? 394次 阅读
星速,何以成为全网浏览新宠?
怎样创建一个应用程序使Nucleo LD2 LED(绿色)闪烁
Eclipse是什么? 怎样创建一个应用程序使Nucleo LD2 LED(绿色)闪烁? ...
发表于 09-30 07:02 ? 0次 阅读
星速带你飞——海淘党必看的剁手攻略来啦~
Hello,集美们,作为一位爱买买买的剁手党,海淘是必不可少的一项技能,难买的”爆款”、超级大折扣,....
发表于 09-28 11:25 ? 63次 阅读
设计时需要重点思考哪些原则
人们对一个商品的第一印象来自商品本身的外观综合形象——产品外观造型、色彩搭配感觉、精致的表面工艺等都....
的头像 工业设计 发表于 09-26 16:39 ? 144次 阅读
怎样用梯形图语言去编写应用程序呢
请问一下怎样用梯形图语言去编写应用程序呢?...
发表于 09-23 06:53 ? 0次 阅读
建议收藏!界面设计必备的8个素材网站
界面设计必备的几个网站,有在线设计网,也有素材网,绝大多数都是免费的。收藏好这些网站,大幅度提高工作....
发表于 09-18 12:36 ? 36次 阅读
建议收藏!界面设计必备的8个素材网站
HarmonyOS系统中基础UI组件
一、UI组件概述 UI组件(以下简称“组件”),是构建界面的核心。 应用中所有的界面元素都是由组件(....
的头像 HarmonyOS开发者 发表于 09-16 09:39 ? 245次 阅读
HarmonyOS系统中基础UI组件
深度解读HarmonyOS自定义UI组件的使用
???? 一、UI组件概述 ? UI组件(以下简称“组件”),是构建界面的核心。 应用中所有的界面元....
的头像 HarmonyOS开发者 发表于 09-16 09:30 ? 229次 阅读
深度解读HarmonyOS自定义UI组件的使用
浅谈香港服务器:服务器压力大该怎么解决
香港服务器的出口带宽资源稀缺,不如美国或者国内带宽资源充足,因此当遇上流量大的情况可能会出现服务器负....
的头像 深圳市恒讯科技有限公司 发表于 09-11 15:18 ? 217次 阅读
韩国站群服务器租用要考虑什么,有什么要求
站群服务器的特点就是IP多,因此非常适合做站群服务,能够很好的解决IP资源不足的问题,给每个网站都提....
的头像 深圳市恒讯科技有限公司 发表于 09-04 18:00 ? 220次 阅读
双线和多线服务器租用的优缺点分别是什么
我们在租用服务器时,一般都有单线,双线,多线等服务器可选。而不同线路的服务器都有其优缺点,了解他们的....
的头像 深圳市恒讯科技有限公司 发表于 09-04 17:11 ? 214次 阅读
美国大流量服务器都有哪几种,它适合做什么
现在更多企业对于互联网业务的访问速度和稳定性方面要求比较高,因此需要大流量服务器来支撑业务,这时很多....
的头像 深圳市恒讯科技有限公司 发表于 09-04 17:07 ? 242次 阅读
com域名和cn域名注册哪一个好,它们有什么区别
com域名和cn域名注册哪一个好?域名对于搭建网站来说是必不可少的,一般企业在搭建网站之前就需要注册....
的头像 深圳市恒讯科技有限公司 发表于 09-02 17:43 ? 177次 阅读
对于新手来说,该如何选择合适的云服务器
新手怎样挑入门型云服务器?云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务,具有弹性、....
的头像 深圳市恒讯科技有限公司 发表于 09-02 17:36 ? 157次 阅读
基于VB6.0的机车静压试验台程序
基于VB6.0的机车静压试验台程序
发表于 09-02 15:41 ? 38次 阅读
台湾服务器租用怎样选,建议从这四个方面入手
海外服务器具有免备案的特点,因此现在有很多站长会选择海外服务器来搭建网站。其中台湾服务器在国内大陆访....
的头像 深圳市恒讯科技有限公司 发表于 09-01 18:01 ? 228次 阅读
外贸建站怎么选择服务器商
现在做外贸的站点越来越多,那么在选择建站服务器主机的时候要怎么选择商家呢,下面给大家分析下。 一、机....
发表于 09-01 15:26 ? 40次 阅读
独家整理!8个超好用的UI资源网!
八个独家珍藏的「免费」设计素材网,务必马住哦??(???)? 01 原文件免费使用的设计社区 ——?....
发表于 08-31 11:41 ? 38次 阅读
独家整理!8个超好用的UI资源网!
一篇文章带你搞懂UI与UX的区别!
经常听到身边的设计师聊天时提到UI设计师竞争压力越来越大,在考虑转型UX设计师。毕竟与UI设计师相比....
发表于 08-31 10:23 ? 47次 阅读
一篇文章带你搞懂UI与UX的区别!
UI设计作品集,这样做面试通过率更高!
都说金九银十,在新一轮的招聘旺季来临前,你做好了UI作品集吗?一个好的作品集能为你的面试加分不少!在....
发表于 08-24 10:02 ? 34次 阅读
UI设计作品集,这样做面试通过率更高!
品茗安全计算启动文件13.5程序安装
品茗安全计算启动文件13.5程序安装
发表于 08-18 17:51 ? 110次 阅读
KeySight N9320频谱仪驱动程序下载
KeySight N9320频谱仪驱动程序下载
发表于 08-13 10:09 ? 68次 阅读
企业采购网站全新升级,联想E采成为更懂采购人的平台
当下大型企业的数字化转型之路势在必行。为此,联想打造更智能的企业采购网,服务于各大有电子产品采购需求....
的头像 话说科技 发表于 08-11 11:47 ? 684次 阅读
企业采购网站全新升级,联想E采成为更懂采购人的平台
Python程序语法元素分析资源下载
Python程序语法元素分析资源下载
发表于 08-09 09:23 ? 68次 阅读
深入解析UI框架简介以及业界发展趋势
作者:yuzhiqiang、sunfei、wanglei,华为软件架构工程师UI 框架简介以及业界发....
的头像 HarmonyOS开发者 发表于 08-04 14:25 ? 622次 阅读
深入解析UI框架简介以及业界发展趋势
你的应用程序如何保持安全性?
引言拥有特权的恶意软件或者可以实际访问安卓设备的攻击者是一个难以防范的攻击向量。 在这种情况下,你的应用程序如何保持安全性...
发表于 07-28 08:40 ? 0次 阅读
恭喜你!转行产品经理前看到了这篇入行软件指南!
从产品经理平时工作时就要考虑的“给用户最精简但必要的”角度出发,皮皮今天将从产品工作流程入手,每个模....
的头像 科讯视点 发表于 07-23 10:07 ? 258次 阅读
恭喜你!转行产品经理前看到了这篇入行软件指南!
建站空间选多大的适合,简单来分析一下
建站空间选多大合适?很多新手选虚拟主机租用搭建网站时,可能对于如何选择空间大小并不清楚。其实这个是与....
的头像 深圳市恒讯科技有限公司 发表于 07-22 17:23 ? 303次 阅读
大彩串口屏M型AV输入坐标显示和视频任意形状播放应用说明
大彩串口屏M型AV输入坐标显示和视频任意形状播放应用说明
的头像 dacai 发表于 07-22 16:49 ? 72次 阅读
大彩串口屏M型AV输入坐标显示和视频任意形状播放应用说明
异常水管道实时预警解决方案的说明
方案的重要性 传统的水力基础建设的工作人员每天要面临高强压的重复的工作内容,比如半夜故障工单催人醒,....
发表于 07-21 15:25 ? 87次 阅读
怎样去满足ADAS应用程序的特殊安全要求?
如何编写可移植的并行程序? 支持硬件加速器最直接的方法是什么? 怎样去满足ADAS应用程序的特殊安全要求? ...
发表于 07-19 06:45 ? 101次 阅读
怎样测试在am335x系统中编写的应用程序
在am335x的arm系统中编写应用程序时,发现想将数据保存在文本文件中,下次启动应用程序时就能从文件中读出上次的数据。结果一直保...
发表于 07-16 06:15 ? 0次 阅读
C语言编写单片机应用程序
89C51单片机C语言编程课件教案.ppt第三章 单片机C语言程序设计;          C语言编写单片机应...
发表于 07-15 06:12 ? 0次 阅读
UI设计新秀figma,将会取代sketch的地位吗?
UI设计岗位日趋火热的当下,UI设计软件也日渐受到关注。从PS到sketch,再到现在当红的figm....
发表于 07-13 10:29 ? 156次 阅读
UI设计新秀figma,将会取代sketch的地位吗?
0.96寸带字库的OLED显示应用程序源代码下载
0.96寸带字库的OLED显示应用程序源代码下载
发表于 07-12 09:50 ? 152次 阅读
批量破解VI密码、加密和移除VI面板的应用程序
批量破解VI密码、加密和移除VI面板的应用程序
发表于 07-08 09:33 ? 108次 阅读
怎样去保护bootloader不被应用程序修改或者擦除?
BOOTRST如何去进行编程? 怎样去保护bootloader不被应用程序修改或者擦除? ...
发表于 07-08 07:19 ? 0次 阅读
网站服务器租用选什么,恒讯科技是首选
互联网时代,很多企业都有自己的企业网站,如果我们想要保证自己的网站建设有保障,所以要对企业网站服务器....
的头像 深圳市恒讯科技有限公司 发表于 07-07 17:12 ? 390次 阅读
vps搭建wordpress网站的3个步骤介绍
如果你想要搭建一个自己的WordPress网站,就算大部分不懂技术的小白也可以使用vps搭建word....
的头像 深圳市恒讯科技有限公司 发表于 07-07 17:04 ? 302次 阅读
如何使用DTK开发应用程序?
如何使用DTK开发应用程序?
发表于 07-06 10:16 ? 105次 阅读
PagerDuty有哪些特点及其功能?
PagerDuty的通话管理功能够简化团队中呼叫责任的分配,全球领先的企业都将PagerDuty作为....
的头像 广州虹科电子科技有限公司 发表于 07-04 13:21 ? 462次 阅读
微服务的核心特性有哪些,如何进行测试
微服务,通常指的是一个支持持续开发、系统可扩展、应用程序解耦和多语言编程的架构平台。它在服务边界的帮....
的头像 马哥Linux运维 发表于 07-02 16:22 ? 387次 阅读
如何用JS UI框架的List组件画一个表格?
本文作者:九弓子 前端最讨厌的事:需要阅读同事封装的各种奇怪组件 前端最喜欢的事:分分钟封装一个自定....
的头像 HarmonyOS开发者 发表于 07-01 10:42 ? 499次 阅读
学习网站资源资料分享
学习资源汇总(资源摘自 BIM软件安装管家微信公众号  Bilibili视频网站)1.常用学习软件VC++6.0软件下载:[名称]...
发表于 07-01 08:41 ? 101次 阅读
如何使用BPF对Linux内核进行实时跟踪
我们可以使用BPF对Linux内核进行跟踪,收集我们想要的内核数据,从而对Linux中的程序进行分析....
的头像 Linux阅码场 发表于 06-30 17:28 ? 416次 阅读
如何使用BPF对Linux内核进行实时跟踪
基于Web云端应用服务构建等的齿轮云测量终端系统
基于Web云端应用服务构建等的齿轮云测量终端系统
发表于 06-30 11:39 ? 75次 阅读
微软公司面发布的最新版Windows 11有哪些亮点
从此,Windows 不再是游离在主流移动互联网应用生态之外的一座孤岛。 Windows 11 问世....
的头像 传感器技术 发表于 06-29 17:36 ? 1294次 阅读
单个按键模拟手按动作控制步进电机程序下载
单个按键模拟手按动作控制步进电机程序下载
发表于 06-29 09:58 ? 99次 阅读
STC8G模拟手按动作控制电机程序下载
STC8G模拟手按动作控制电机程序下载
发表于 06-29 09:56 ? 77次 阅读
通过Verilog在SRAM读写程序源代码
通过Verilog在SRAM读写程序源代码
发表于 06-29 09:26 ? 96次 阅读
openharmony官网地址入口
OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)创办及运营的开....
的头像 电子魔法师 发表于 06-24 15:12 ? 999次 阅读
openharmony是什么
OpenHarmony是开放原子开源基金会上的一个孵化项目,目标是支持可在多种终端设备上运行。既可运....
的头像 电子魔法师 发表于 06-24 14:24 ? 442次 阅读
应用环境中自动安装无线网卡的问题及解决方案
讨论了Windows CE环境下无线网卡的安装,并提出了一种在系统断电重启时自动安装无线网卡的解决方....
的头像 电子设计 发表于 06-22 14:43 ? 410次 阅读
应用环境中自动安装无线网卡的问题及解决方案
openharmony是什么语言写的 openharmony的理解
OpenHarmony和常规的操作系统一样,把整个操作系统众向的划分成了多个层级,上层屏蔽下层的差异....
的头像 独爱72H 发表于 06-22 12:46 ? 762次 阅读
鸿蒙os有什么功能?
距离华为正式发布鸿蒙操作系统以及过去半个多月了,鸿蒙操作系统是华为自研发的一款操作系统,它是可以实现....
的头像 Les 发表于 06-18 14:03 ? 2314次 阅读
鸿蒙os有什么功能?
点菜宝DCB164-V2.01应用程序下载
点菜宝DCB164-V2.01应用程序下载
发表于 06-16 09:24 ? 75次 阅读
IP2022在嵌入式牌照识别系统中的应用是什么?
IP2022是什么? 如何去编写一种ipOS应用程序? IP2022在嵌入式牌照识别系统中的应用是什么? ...
发表于 06-03 06:31 ? 101次 阅读
大彩串口屏M型语音识别应用
大彩串口屏M型语音识别应用:文档仅适用于M型语音识别系列的串口屏产品。...
发表于 06-01 15:41 ? 2929次 阅读
综合在线 日韩欧美 中文字幕_综合在线 日韩欧美 中文字幕精品视频 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>