实用10大原则:网页UI设计全适用!

本文和大家分享的主要是网页ui设计中的10大原则,一起来看看吧,希望对大家设计中有所帮助和启发。

1.纠结的时候,让自然为你做决定!

遵循自然规律的设计总是因为贴近万物本源而受到更多人的宠爱,因此,当你举棋不定的时候,你可以选择将设计代入大自然定律中,让自然为你做出最好的决定。比如,现实和自然告诉我们,光源来自天空,在人们也已经习惯了这种由上至下光线来源的时候,设计师需要做的应该是能顺应用户视线的光线设计。

2.脱离色彩诱惑,能真正看清布局设计

色彩对人类视觉的冲击力能产生最大的效果;一个网页的用户体验是否合格,从色彩和布局上就能看出一二。但在色彩的“陪同”下,布局的好坏与否似乎就此被“矮化”。为了让设计师在设计时能更加清楚的审视网页布局,去色或是“灰度模式”的使用也许更有利于新手的布局设计工作。

灰度模式:

没有了色彩“打扰”之后的网页布局一旦能够让自己满意,再按照色彩理论或是个性喜好添加和更改颜色。

3.设计感是“留”出来的!

大胆留白是设计概念中常常会提到的理论,但真正能根据理论具体落实的设计师却为数不多。可能是因为设计师胆儿不够大(PS:怕被客户喷死- -,“你是不是偷懒啊!怎么内容那么少!你到底有没有认真做设计啊!@#¥%......*!”),另一种可能是没有在实际中领会到留白的美妙。

网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间,并不是一种所谓的“偷懒”行为。大片留白在国内市场中极有可能面对各种不满,但小范围的留白却能很有效的提高整个网页的档次。比如网页中图片与字句之间的间距,只要留出两倍及以上的间隙,整体都会展现出令人眼前一亮的简洁感。

4.试试把文字直接放在图片上

这种设计手法看起来很简单是不是?但要用这种方法设计出一鸣惊人的网站就有一定难度了。在应用过程中,为了不破坏网站的用户体验,有几点可以特别关注。

文字的颜色尽量使用白色,让网页看起来更大气;因此,网页背景图的色系选择以暗色为主;更细致的话可以再不同的分辨率下进行调试,保证在所有的情况下文字或主要内容都是易于辨识的。

5.关于字体,适合比新颖更重要!

“坚定求新”是很多设计师的职业病,其实,在任何事件中,适合,比什么都重要!

在网页字体的应用中,形形色色的字体样式会让设计师不知如何是好,设计师也许会因此挑花了眼,也许会始终在常用的几种字体中互相转换。而关于字体的选择,设计师应该根据图片中的某些元素作为灵感,以此在网页中自然地形成隐形线索。

6.只有强弱并存才会获得对比

用强弱的对比展现重点突出是设计中强调内容最自然的方式。比如背景图的弱化,加上清晰的文字或图案,网页会因此营造出以后总别致的唯美效果。如果图片比较单调,也可以在背景和文字的中间添加一些透明度较高的线性几何成分,让页面丰富充实起来,也让整体不再单薄。

7.你需要一双善于发现的眼睛

身边的一切都可能随时为你带来灵感,千万别吝啬你的眼睛!

每一个细小的部分都有资格成为你的设计元素,你应该让它们产生一些小改变,它们就会让你的设计大提升。滤镜?几何?每一种效果都需要你的尝试。

8.桃红色浅橙色!她们才是真正的百搭色!

粉嫩的暖色系色彩一直会被误认为是很难用的颜色,当这类色彩被混杂在五颜六色的“调色盘”中的确够难搭配,那不妨尝试一下在单色背景中使用她们,无论是稍作点缀,还是设置为主色调,你都一定会发现其中的不张扬魅力。

9.导航是网页中最重要的设计

导航可以说是整个网站中最重要的设计,用户体验舒适与否很大的决定权源自于此。对导航设计的最佳评价应该是“召之即来,挥之即去”。幽灵按钮、汉堡图标和无线框纯文字设计都是好导航的常用设计手法。

不需要的时候,导航只是个小小的图标。

展开之后,它是这样的:

也可以根据你的意愿让它随时消失

又或者展开前是如此低调的存在。

打开后以色块的形式呈现,让近视患者也能清楚的分辨:

10.减去页面之间的相同存在!

相同的部分在网页设计中显得毫无意义,不仅让网页逻辑变得繁杂琐碎,更会让用户觉得反感。尤其在布局一致的情况下,内容的差异化尤为重要。这些差异化可以从很多方面表现出来,比如色彩、文字、风格等等。

来源:UI中国

时间: 2024-10-28 23:06:04

 实用10大原则:网页UI设计全适用!的相关文章

学习中收集的一些有关网页UI设计、前端开发的相关知识网址分享,赶紧收藏走起。。。

http://iconfont.cn/ 强大的矢量图标库,妈妈再也不用担心我不会画图标了 http://pxtoem.com/ 像素单位px的转换为em,可以自豪的说小学数学是体育老师教的啦 http://qrohlf.com/trianglify/#gettingstarted 时下钻石风格代码完成,有木有高大上 http://www.sheji11.com/category/ruanjian 软件神器,设计师资源网,各种插件上这找 http://www.w3cplus.com/css3/ps

网页色彩搭配教程:三个实用方法搞定网页配色设计

为什么要整理设计色彩方法? 在色彩设计应用中,我们对颜色不同程度的理解,影响到设计页面的表现,熟练地运用色彩搭配,设计时岂不事半功倍.一张优秀的设计作品,它的色彩搭配必定和谐得体,令人赏心 悦目,反思我们在设计过程中,怎样的色彩搭配更容易达到设计目的,又是什么影响了我们的配色思维呢? 以下几点常会影响色彩搭配思维: 仅关注色彩表象 搭配方法不够系统 色彩与构成掌握不到位 首先,我们简单理解一下色相和色调概念: 接下来我们按三个大类的配色方法,结合一些案例 ,分析色彩在页面中的应用手法. 一.色相

程序员编程10大原则,请牢牢记住!事半功倍,不扯皮

1.想清楚,再动手写代码 刚入行的新手,为了展示自己的能力,拿到需求迫不及待地就开始上手写代码,大忌! 2.不交流,就会头破血流 不爱说话和沟通,需求都理解错误了,最后做出来才发现,只能加班返工! 3.一定要写注释 时间久了,你会连自己的代码都看不懂! 4.文档没人看,但还是要写 文档的作用大部分时候不是用来沟通的,是用来做记录的,大部分需求还是通过口头沟通,但是不写文档做记录,后续就容易扯皮! 5.业务高于技术 如果技术不为公司商业做服务,那将毫无价值,公司赚钱才是硬道理! 6.别指望需求会稳

WEB网页UI工具包PSD

WEB网页UI工具包PSD素材下载适用于网页UI设计.网页UI UI设计 播放器 日历模板 http://www.huiyi8.com/ui/gongjubao/ WEB网页UI工具包PSD

java的10大设计原则

1. DRY (不要重复你自己) 这是指不写重复的代码,取而代之是使用抽象共性的东西.如果超过一次使用硬编码,那么就要考虑将其公开为final修饰的不变量:如果你在两个以上地方有相同的代码块,那么就要考虑使其成为一个单独的方法.SOLID设计原理的好处是在维护.值得注意的是重复的不是指代码,而是对于功能而言的. 2.封装变化  在软件领域唯一不变的就是"变",所以封装那些你估计在未来可能被改变的代码.这种设计的好处是容易测试和易于维护.如果你是进行Java编码,那么就要使变量和方法变成

全是干货!UI设计的30条黄金准则!

http://www.wex5.com/portfolio-items/js-1/ 全是干货!UI设计的30条黄金准则! 总的来说,好的UI界面有几个特征:简洁.便利.目标明确.人性化.字面上看这几点貌似很简单,但是考虑到我们的营销目标.考虑到内容复杂度,要确确实实达到这个目标却非常困难.下面列出的这些经验,一直以来在WeX5应用开发者社群中反复被验证,简单实用.极具操作性,WeX5开发工具强烈推荐给所有应用开发者及爱好者! 注:内容转化率是指用户浏览页面的时候能被用户吸收的内容比率. 1. 尝

UI设计师必须了解:2015年十大移动端APP设计主流趋势

从移动端兴起,主流设计风格定型,再到Uber.Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境.促成这一切的影响因素很多,比如社会发展趋势的变化.共享经济的大热.新技术的积累,等等等等.这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来. 同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备. 随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多.查看邮件.预订酒店.叫外卖都有赖于各种应用,而诸如Airbnb和Gr

每位iOS开发人员不容错过的10大实用工具

内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用工具之视频制作 7.iOS开发十大实用工具之分析工具 iOS简介 说起iOS,自然不必多介绍了,它是苹果公司开发的移动操作系统. 苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch.iPad以及Apple TV等产

IOS7 UI设计的十大准则

陈子木 iOS7 的用户界面设计比以往更卓越,并为用户提供了更具吸引力的独特体验,带来更大的机遇.在正式写代码之前,认真考虑UI设计是否符合这十条设计准则,可以提高App的可用性与吸引力.如果要更深入了解iOS7的设计,你可以阅读苹果官方的iOS人机界面指南(英文版),或者下载知乎用户翻译的中文版iOS7人机界面设计指南. 相关文章:经验分享:IOS平台设计规范深度解析!打造IOS7设计风格的诀窍巨人之争!IOS7和ANDROID4.4奇巧巧克力 iOS7的10大设计准则涵盖了UI设计的交互性.