网站建设服务

网站制作案例

WONDERFUL CASE

以灵动思维设计驱动企业价值增长,您的门面,更是我们的脸面,期待与您携手实现商业目标!

18980052360

网站开发优势

ADVANTAGE

成都网站建设公司为广大客户提供成都网站制作,网站开发等服务!

网站建设八大服务

SERVICE

多核心节点一对一服务于客户,让您放心

网站制作新闻

NEWS

速商是一个有创意、有激情的年轻人凝聚的团队,
7年来服务世界500强企业,为事业单位提供近2700次的大/中型网站建设及后续服务!!

  • 企业网站制作流程及注意事项

    企业网站制作流程及注意事项

    网站制作大致流程:网站策划(功能定位、功能架构、设计风格等)——筛选域名及备案——效果图审核计修改——设计定稿——前端开发——后端 ...

    详细 >>
  • 企业如何改版网站

    企业如何改版网站

    网站改版几乎是每个网站都不可避免要面对的问题,无论是企业网站还是电子商务网站、内容资讯网站甚至个人网站,经过一段时间运营之后,当企业网络营销策略、网站运营思路或者用户需求...

    详细 >>
  • 网站建设对企业有什么好处和作用?

    网站建设对企业有什么好处和作用?

    网站是企业在互联网上展示形象的门户,是南京企业开展电子交易的基础,是企业网上的”家”,设计制作一个优秀的网站是迈向互联网的重要步骤。在当今互联网时代,一个企业没有自己的网...

    详细 >>
  • 网站建设时需要注意的规范及如何提高网站加载速度

    网站建设时需要注意的规范及如何提高网站加载速度

    对于每一家企业来说,如果拥有一个自己的网站,将会让自己的品牌和产品得到更加充分和有效的推广。但处于信息化时代,网上存在大量的网站, ...

    详细 >>
  • 有关弹幕视频网站的发展现状分析

    有关弹幕视频网站的发展现状分析

        关于我国弹幕视频网站的发展历史,小编认为可以分为三个阶段,第一阶段是传入与接受期,第二阶段是分裂发展期,第三阶段是快速成长 ...

    详细 >>
  • 关于现阶段Web网站存在的问题分析

    关于现阶段Web网站存在的问题分析

        互联网行业发展非常迅速,信息呈现爆炸式增长,同时由于如今的Web网站的交互性明显提升,使用户在使用Web网站的时候遭遇挫折的现象 ...

    详细 >>
  • Web网站的视觉设计阶段分析

    Web网站的视觉设计阶段分析

        一般情况下来看,视觉设计阶段是Web网站的建设从抽象到具象的一个过程,主要集中于Web网站表现层的开发。视觉设计阶段主要侧重于如 ...

    详细 >>
  • 中国房地产网站是如何发展起来的?

    中国房地产网站是如何发展起来的?

        中国房地产网站是如何发展起来的?关于中国房地产网站的兴起,是在20世纪最后两年里,随之诞生了一批房地产网站。门户网站搜狐公司 ...

    详细 >>

速商网络成立,迄今7年

2700+个企业客户的共同选择

56家渠道合作公司,专属管家式服务

小时

管家式服务,售后长期稳定无忧

1900+个常年续费客户

网站建设公司
在线留言

Online message

我们的工作人员会尽快与您取得联系

服务项目
网站建设
互联网开发
微应用(微信)
微信小程序
APP定制开发
400电话
主机租用
域名注册
联系我们

地址:成都市青羊区光华东五路恒大翡翠华庭

邮箱:service@susor.cn

热线:17761282016

座机:028-85099360

微信公众号 二维码
界面不精致,往往是你忽略了这些设计细节-网站建设-速商网络科技
成都网站制作
当前位置: 首页 >新闻资讯 > 网站建设 > 界面不精致,往往是你忽略了这些设计细节
2018-04-20 09:47:29

界面不精致,往往是你忽略了这些设计细节

QQ截图20180419085053.jpg

为什么一个简单的界面,你做出来后总觉得不够精致,很可能是因为你遗漏了一些容易忽略的设计细节。本文作者通过一个案例,细致入微的教你如何改良你的设计,一起学习起来吧!

我自己读完此文有一个很大的感触:做好设计不能全靠数学的精准实施,很多时候还是要相信自己的眼睛,以心理感知作为判断标准来辅助优化设计,最后的结果对用户来说或许才是最优的。

每当你看到一个界面时,你的大脑其实都在欺骗你。无论你如何努力使事物看起来一致——旁观者的眼睛往往不会同意,因为我们在现实生活中是通过大脑来感知物体的。所以,作为设计师,我们唯一的选择只能是反向「欺骗」用户的大脑(译者注:在视觉上)。在本文中,我将向你展示一个设计组件需要从哪些地方去做改善,一起来看看这个弹窗例子吧。

△7 处已经做了调整

△ 没有做调整

试着去比较调整前后的视觉感觉。直接对比的话可能很难看出区别,所以我做了一个 GIF 帮助大家进行对比。

一、调整重心

现实世界中的任何物体都会受到重力的影响。意思是,一旦没有支撑就会掉下来。我们的大脑将现实世界的期望自动应用到界面的元素上,并假设屏幕上的任何物体都在「尝试」掉下来。即使当物体完全静止时,我们的大脑仍然认为它会向下移动(物体上方的空间会增加,下面的空间会减少)并对其进行视觉调整。一个完美垂直居中的对象,在实际中看到的时候会偏低。为了使物体在视觉上保持一致,我们必须反补偿重力的「预期」,把物体略微上移。如下图:

物体越大,它就越「重」,从而「下降」得更快。所以我们需要为更大的物体补偿更多,而更小的物体补偿更少。 粉色显示容纳「更小」按钮的容器:

二、调整圆角按钮的边距

将圆形按钮稍稍移动到对其之外也是一个不错的主意。

否则,按钮会被认为略微不对齐,视觉上「向内凹进去了」。同时,如果按钮圆角比较小,则在边缘看起来还是一条直线,这时候就不需要进行视觉补偿了。

三、调整标题边距

同样的原则也适用于标题,特别是较大的标题。 随着字体大小的增大,每个字母的周围空白都变得更加大,并打破了左边界的视觉感知。 为了改变这一点,我做了一个小的负左边距:

当然,将它应用于设计中的每一个标题是很费精力的一件事,因为这需要一个手动调整过程,但是对于更突出的标题(例如,在一个登录页面上)是值得的。

四、调整文本块的右边框

使用左对齐文本时,文本块的右边缘变得「不整齐」,并且文本内容看成都网站制作起来会偏移。 类似于圆形按钮的情况,我将把整个文本块稍微往右边移动,使其视觉居中:

这样,右边缘就更靠近右边隐含的垂直对齐规则。如果我们不这么调整,则会有明显的感知差异:

五、调整颜色

根据填充区域的不同,颜色的感知是不同的。 应用于白色背景上的文本颜色,将比放在同样大块的相同颜色上的文字显得更加亮一些。 相反,如果我们在深色背景上放置彩色文本,颜色看起来会变得更暗。 背景会「吸收」文字颜色,总是让视觉上转向背景颜色。 为了适应这一事实,当我在浅色背景上使用文字时,我把颜色适当调暗一点,而在深色的背景上把颜色适当调亮。

字体尺寸和重量越小,就越需要补偿:

六、调整灰度这是颜色调整的一个特例。我尝试选用100%黑色并修改其不透明度来建立灰色文字,而不是直接设置颜色值:

这样,当你变暗背景时,你的灰色不会被「看不清」:

半透明黑色有助于实现可读的结果,而无需创建许多不同的样式。 对于较深的背景,半透明白色也是一种选择:

七、调整投影浓度

我使用不同的阴影浓度取决于产生阴影物体的颜色。对于较暗的物体,应使阴影更强烈,而对于较亮的物体,应使阴影更轻薄:

如果没有这个技巧,假设两个阴影都具有相同的不透明度,那么较亮物体的阴影会在较暗物体的阴影旁边看起来更暗:

总结

当然,并非每个项目都需要花费额外的视觉调整时间,但如果您正在开发的界面需要特别重视并且需要脱颖而出,使用上述所有技巧将会带来更加和谐的结果。

返回 BACK
服务项目
网站建设
互联网开发
微应用(微信)
微信小程序
APP定制开发
400电话
主机租用
域名注册
联系我们

地址:成都市青羊区光华东五路恒大翡翠华庭

邮箱:service@susor.cn

热线:17761282016

座机:028-85099360

微信公众号 二维码