页面设计(web设计)5个小技巧

从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮助的。这些技巧并不依赖于特定的主题或模板,所以会适用于多数情况下的设计。不罗嗦了,我们开始吧!

1.改善链接体验
       网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素。如下图,用高亮来区别可点击区域。


       显然,可点击的区域越大,用户点击就容易。在没有指定宽度的时候,将链接转换为块元素,可以使文字链接的可点击区域扩大到为整个容器的宽度,这样的设计尤其适用于侧边栏的链接。这个技巧可以通过如下CSS实现。

a {
 display: block;
 padding: 6px;
 }  

注意:由于转换为块元素只对链接的宽度起作用,所以需要设置间隔(padding)来保证块在纵向的间距。

      2.按钮也需要排版!
      设计的每一个细节失误都有可能把完美的产品变成平庸,比如按钮、Tab这样简单的界面元素,由于用户每天都会点击无数次,也需要适当的进行排版。请看下面一些例子:

    乍看起来上图没有什么问题,仔细观察可以发现,按钮和select的文字都偏上,原因就是将小写字母作为了排版的基准,小写字母居中时,整个文字的位置就会显得偏上。如下图:

      就像上图中,如果按钮上的文字包含大写字母或一些较高的小写字母,如”t,d,f,h,k,l”的时候,文字就会显得偏上。所以,通常应该把大写字母作为定位的基准,或者在小写字母较多时,稍微将文字的位置向上移动。

      上面的文字排版使按钮看起来更舒服,注重像这样的小细节对界面设计大有帮助。
      大头:虽然中文没有大小写字母的问题,但也有很多页面设计时不注重按钮的文字排版,导致错位。

时间: 2024-12-05 16:00:36

页面设计(web设计)5个小技巧的相关文章

PPT扁平化设计的8个实用小技巧

PPT扁平化设计的8个实用小技巧   扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一个师兄做一个PPT,用了几乎每个人都听说过的扁平化风格.于是趁热打铁,找了一些扁平化的作品和文章看了,自己对扁平化做一个总结,希望对你ppt抑或海报设计有所帮助. 注:此处所谈的扁平化指的是一个大的概念,将后面衍生出来所谓的"似扁平化"也包含进来. Tip 1:关于高光.渐变和投影

UI设计显得更简约的小技巧

互联网界一直在有提倡简约设计的声音,可简约设计有什么小技巧? 谈简约设计的书籍有很多,互联网界也一直在有提倡简约设计的声音.有人说,看国内的各大门户的设计,通通都是文字和功能的粗暴堆砌,难道中国人真的不擅长设计简约吗. 产品长什么样是跟产品的受众有关的.我们看国内电视购物,从来都是以"有多少功能"的方向来推销产品的.或许我们的目标受众就是喜欢大而全的东西,并不是设计师和产品经理的错.为了迎合大环境的产品需求,我们不得不用各种可有可无的功能点来吸引用户. 臃肿易烦腻,简陋生欲望 产品功能

高手传经 网页设计中的几个小技巧

技巧|设计|网页|网页设计 如上图是Relen的个人主页Relen.com,2004版的首页发布信息,尤其是过年前后,利用雪花来点缀页面是非常合适的.注意这里面的雪花的摆设位置是有些技巧的,你可以考虑用黄金分割来支配你的设计思路,以达到合理.舒适的效果. 先排列文字,运用两到三种不同的字体,绝大多数文字对齐左侧,而其中一行突出,形成错落有致的感觉.文字的大小需要调整,主要信息文字大写,字体突出.而其他根据信息主次和平面设计的要求等多种因素进行排列.个别地方使用斜体加强,或用加粗的形式明示. 字体

响应式Web设计技巧及编写一个响应式页面实例

响应式 Web 设计技巧 什么是响应式设计? iOS 和 Android 的发布,智能手机.平板电脑.智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的挑战,我们无法估计用户的终端设备和网络状况,更不可能为每种设备都专门设计一套网站,如何实现 Web UI 在多终端中的适配呢?2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design",响应式

web设计中的网页表单关于编码设计的小技巧

原文地址: http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为&q

干货!小技巧帮你完成创意十足的网页设计

干货!小技巧帮你完成创意十足的网页设计 时间:2014-10-09 14:42 来源:优设网 作者:小峰向前跑 小白叨一叨:依靠独特的设计手法,搭配上创意优秀的图片,可以让网页突破空间界限,给人留下深刻的印象.而如果有一些小技巧的话,则会有事半功倍的效果.(注:图片下为来源网站名) 作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已.接下来,我们将探寻2013年的最新设计趋势,这绝对是意义非凡的事情.Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流. 这些新趋势让设计变得妙趣横生.

一学就会的响应式 Web 设计实用技巧

什么是响应式网页设计? 先我们来看看百度百科的解释 响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境.响应式网页设计就是

简洁至上的Web设计——创意要素及设计技巧

中介交易 SEO诊断 淘宝客 云主机 技术大厅 简洁,不等于简单.这与弹琴是一个道理,你也许有能力弹得很快,但你并不需要在所有地方都弹得这么快.在很多时候,让速度慢下来反而比弹得飞快要来的更加困难.实际上,味道往往最能体现在从容自然.舒缓平淡的韵律当中.接下来进入原文作者人格;我发现自己在很大程度上就是一Dummy System来着. 简洁的Web页面设计风格是当前圈子当中的风潮之一.在本文中,我们首先将对这类风格当中的那些最具代表性的组成要素进行分析,随后,我(英文原文作者)还会向各位分享一些

CSS设计网页小技巧:100%的高度

在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度.有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法.今天,我将于你分享一下. 我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题.我想让div结构自动延伸,但是它就是不能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法.比方说你有如下html代码文档 <!DOCTYPE html PUBLIC "-//W3C//DTD