技术资讯
10个改善UI设计的技术(1)
2008-12-18 22:04:00
在设计成品中,UI设计越来越显得重要。而现实中有很多可以让一个网页设计既漂亮又功能化的技术,这里,原作者介绍了10种他经常用在自己设计的产品中的技术。 如果你想拥有更好的UI,让我们一起继续。
1. 填充链接块
链接(或锚点)都是默认的内联元素,这就意味着,只有在它本身的跨度上才有可点击性。如下图所示(蓝色部分为可点击区域,一图是TechCrunch的,二图是Smash Magazine的):
显示,Smashing Magazine的链接可点击性要比TechCrunch强。这可以增大点击的正确率和点击率。而如果你想这么做,只要用以下的代码即可:
a {
display: block;
padding: 6px;
}
当然,要提醒一下的是,请确保运用Padding是恰当的,IE有可能让Padding没能正常实现其真正的样式。 有效避免Padding出现问题的方法是尽量让它们与没有padding或Margin的容器接触,而常用的方法是,给padding的元素加上一个border。
2. 按钮文章的排版
别小看这个问题,这可能是区分一个产品好与坏的一个细节。好的设计者会做到视觉平衡。让我们来看看下面的例子:
第一眼看起来还好,但看越觉得不对。你会觉得按钮上的文字好像偏上了。因为大写字母我小写字母混大一起时,有一些是需要向上顶,或向下的(中文方块字就不会了,很好!)我想表达的是:
那么,我们需要怎么做呢?如果我们不想全部都是大字字母的话,可以按照下面的方法。让他们都在同一个水平的空间内,而且是向下沉的,这样做,可以现好地平衡视觉效果,让人看起来文字正好在中间:
3. 使用对比来突出焦点
我想,我自己常用这个方法。因为这即安全又环保(囧),让我们来看看下面这个吧:
看完上面的,让我们来对比一下下面的文字,有什么区别呢? 很明显,我们把焦点放在大标题上。
不过,需要注意的是,你要突出的是标题,而不是一些比较将要的东西,所以,把焦点用对,向下面这个,并不适合:
4. 使用颜色来突出焦点
颜色通常可以引起用户的注意,而你可以用突出的颜色来展示你想要展示的结果,就像下面一样:
不过,就像上面我们在说标题的焦点一样。你最好把颜色选对。做比较好的搭配,并确保要突出的内容出现在上方,而不是有被压着的感觉,就像下面这两个实例:
Function 把HEADER区域中的 "We’re Hiring" 的链接突出来,像你现在所看到的,会没有顾忌地把注意力投过去。从而使这个链接不会被遗忘,另外,让我们来看看下一个:
Causecast 刚把重要的东西都放在粉红色的背景下,比如Feedback,LOGO,DONATE等。
不过,切记,不要随便让一个页面充满颜色,这样会失去焦点;不要运用太另类的搭配,这可能引起反感。适当利用,懂得我们的目的是要突出所需展示的内容,而不是在颜色本身。
5. 用空行来表示关系
这个说起来好像有点让人摸不着究竟能体现出什么关系来。其实,你只要看看平时我们看书的时候,通常每一个章节或者某个段落都可能用空白来隔开,表示他们属于各种的内容,就是这个意思,下面让我们来看一个例。这个排得很漂亮吧:
对,确实很漂亮。不过,在标题与段落之间,他们的间隔都一样,容易让人产生不知道这个标题是属于那一段的感觉。而我们能做得更好,比如像下面一样显示,让人一目了然。
PS:赶着去吃饭,接下来的,明天再发布,ohhaha…
原文:http://www.happinesz.cn/archives/838/
近期更新
- [2023-07-26 14:17:28] 为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,高端网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 高端定制网站建设——从满足预期到走向卓越
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少?
延伸阅读
- [2009-01-15 08:52:00] 区分UI设计中的装饰元素和意义元素
- [2008-10-13 14:29:00] UI设计师在产品项目中需要做什么?
- [2008-10-16 12:06:00] 关于UI设计规范的制定
- [2008-07-02 11:53:00] 从网页设计到UI设计—重在设计理念的转变