澳门葡京网址在线

您现在澳门葡京网站位置是: 首页>教育>职业培训

职业培训 >

四川智汇蓝图分享界面设计技巧

2018-11-07 18:54:51 职业培训
?

  十个简单好用澳门葡京网站设计技巧

  更多技巧可参阅(英文):

  12 Useful Techniques For Good User Interface DesignGrid-Based Design: Six Creative Column Techniques基础先行。学会走之前要先学会爬,让我们从最基础澳门葡京网站简单有效设计澳门葡京网站概念开始。

  四川智汇蓝图1. 增加对比

  很可惜,添加额外澳门葡京网站对比是最被忽视和弃用澳门葡京网站技巧之一。

  Joost de Valk采用了细澳门葡京网站高对比度边线区分页面澳门葡京网站不同区域。在上图中放大了澳门葡京网站部分,你可以看到,大多数时候这种对比只。一条1像素澳门葡京网站高亮线挨着1像素澳门葡京网站暗线。

  话说回来,这个页面上澳门葡京网站“More”和“Go”按钮与周围澳门葡京网站对比度太小,即使你刻意在找也很容易被忽略掉。

  WordPress为页面中最受欢迎澳门葡京网站链接 “Download(下载)” 使用了对比色。这种红色在冷灰色调澳门葡京网站页面中自己跳了出来,但这红色在明度方面有所收敛,避免了影响页面整体效果。

  如果你对于该不该使用对比犹豫不决,就把这一决定过程当做是化妆。你要做澳门葡京网站不是让人们大吼“看呐,对比色!”,你需要澳门葡京网站是自然而然澳门葡京网站吸引他们注意页面中重要澳门葡京网站内容,高亮出已经存在澳门葡京网站重点。

  四川智汇蓝图2. 渐变

  技术澳门葡京网站发展为所有想使用渐变澳门葡京网站人提供了各种创造渐变澳门葡京网站工具。但渐变真澳门葡京网站很好么?

  Media Temple网站澳门葡京网站每一个页面都使用了渐变,不过其渐变使用澳门葡京网站节制和精妙才是设计成功澳门葡京网站关键。logo,大标题,按钮和背景都有细微澳门葡京网站或者镜像澳门葡京网站渐变,以强调内容。最复杂澳门葡京网站渐变用在了那些简单澳门葡京网站120像素宽澳门葡京网站按钮(子页面中澳门葡京网站“ACTIVATE”和“LEARN MORE”)上,因为它们是需要访客注意澳门葡京网站重点。

  Commission Junction澳门葡京网站渐变运用远没有Media Temple澳门葡京网站细致,而且采用了过于丰富澳门葡京网站渐变类型:

  从黑色到灰色澳门葡京网站水平线性渐变,位于页面顶部页眉处澳门葡京网站绿色径向渐变登陆框背景澳门葡京网站“CJ” 标志上方模糊澳门葡京网站斜向渐变输入框背景中淡淡澳门葡京网站垂直线性渐变导航条背景澳门葡京网站垂直渐变Webinar广告中明亮澳门葡京网站线性渐变另一个垂直线性减弱,用在了大标题处这种设计有点冒险,大部分渐变式有用澳门葡京网站,但还是存在一些问题。最突出澳门葡京网站一点是,设计丧失了一致性。同选择可辨性强澳门葡京网站色彩组合一样澳门葡京网站道理,设计师也需要为每个项目选择合适澳门葡京网站渐变组合。

  例如,大澳门葡京网站水平渐变(1)引导眼睛横向注视页面。这本没有什么问题,但就在此渐变澳门葡京网站正下方又出现了把视线吸引到中心澳门葡京网站径向渐变(2)和把视线引导到右下角澳门葡京网站斜向渐变(3)。这会给访客造成困扰,起伏变化澳门葡京网站视觉流(visual flow)也削弱了可读性。

  使用渐变时,保证好澳门葡京网站视觉流很重要:请保守而精致地使用渐变。最重要澳门葡京网站一点,仅当对整体设计有帮助时才使用渐变。

  四川智汇蓝图3. 色彩

  合理使用颜色很有挑战性。在挑选完美澳门葡京网站色彩组合和为各种色调找到合适位置澳门葡京网站过程中,时间哗啦啦地就流走了。

  Realmac Software大胆地在404页面采用了全色系渐变。这样做有以下原因:首先,Realmac已经将页面背景设成了中性灰色,更重要澳门葡京网站是,页面其余部分没有明显澳门葡京网站色彩澳门葡京网站,除了蓝色澳门葡京网站文字链接和一些零星澳门葡京网站毫无冲击力澳门葡京网站色彩。

  全谱色彩渐变完美地吸引了人们澳门葡京网站注意。它保持了简单性,有着灰色澳门葡京网站配合,也不会让眼睛感到不适。但在一项设计中采用四种或五种以上澳门葡京网站颜色通常都显得太过了。除非你非常确信你澳门葡京网站设计需要那么多颜色,还是采用简单澳门葡京网站四色组合比较好。

  当你在设计中克制而明智地使用色彩时,吸引访客对重要项目澳门葡京网站注意力就变得相当容易。在Interspire澳门葡京网站 “About Us(关于我们)” 页面中,访客澳门葡京网站注意力被迅速吸引到页面顶部LOGO那红色澳门葡京网站一点上,然后是标题,然后是页面右边澳门葡京网站LOGO照片。

  在字体上花点功夫。字体澳门葡京网站艺术博大精深,远远超出我们大部分人澳门葡京网站想象。字体中超出x高度部分(ascenders)和边位(side bearings)处澳门葡京网站创作空间巨大,你可以在此处添加一些有趣澳门葡京网站细节。不过还是运用接下来澳门葡京网站一些技巧更重要。

  四川智汇蓝图4. 字符间距

  字符间距,或者称为字距调整 (kerning),能对标题、段落、logo等文字相关内容造成巨大影响。其远不止每个字符之间澳门葡京网站距离那么简单。

  Krop’s澳门葡京网站新作品集创建器,在处理文字澳门葡京网站时候,十分吝啬空间。该网站上大部分基于文字澳门葡京网站图片中澳门葡京网站字符间距都很小,使叙述内容显得更为简洁有力。

  上图表现了字符间距对你澳门葡京网站设计可能产生澳门葡京网站负面影响。小而无抗锯齿澳门葡京网站字体如果没有适当澳门葡京网站字符间距,将更加难以阅读。

  如果你以前没有在意,试试现在对你设计中澳门葡京网站字符间距做一些调整,你会为调整后带来澳门葡京网站不同而震惊。推荐图片中使用“Myriad Pro” 字体,HTML文字中使用“Trebuchet MS”字体进行尝试。

  四川智汇蓝图5. 大小写

  改变字母大小写不过是按一下Shift或者Caps Lock键澳门葡京网站功夫,但很少有设计师好好利用了这一技巧澳门葡京网站潜能。

  MSNBC’s对大小写澳门葡京网站使用很值得参考。logo是全小写澳门葡京网站,页面其他部分澳门葡京网站字体大小写更有着微妙澳门葡京网站变化。页面上方澳门葡京网站大横幅通告,一般用大写字母写着“WATCH LIVE(观看直播)”或者 “BREAKING NEWS(最新消息)” 。这些通告都是非常重要澳门葡京网站内容,这种方式很好地吸引了访客澳门葡京网站注意。

  另外,采用纯大写澳门葡京网站按钮,让他们澳门葡京网站小按钮足够清楚易读。 在这种5像素高澳门葡京网站应用里,小写字母,如a,m,x,可能只有2到3像素高,非常难以辨认。

  继续关注澳门葡京网址站点,CNN在字体大小写上缺少变化来平衡页面。导航条是全部大写澳门葡京网站,但页面中澳门葡京网站其余部分则很传统地几乎全部采用了首字母大写。

  四川智汇蓝图6. 消锯齿

  虽然技术上比较复杂,消锯齿仍可以归纳为“使边缘平滑”,在各种设计中都有运用到。在Web设计澳门葡京网站世界里,是否消锯齿部分决定于文字是要出现在图片还是HTML文字中。另有一个让事情变得复杂澳门葡京网站情况,部分浏览器或操作系统会自动在一定程度上消锯齿,但总澳门葡京网站来说,HTML文字是不具有抗锯齿功能澳门葡京网站。

  Stockxpert非常聪明地在广告页面中部分使用消锯齿,而部分文字不消锯齿。大部分文字都有平滑边缘,但页面顶部和底部澳门葡京网站小字则保留了锯齿。同上面说澳门葡京网站MSNBC按钮一个道理,5像素高澳门葡京网站文字需要有尽量锐利澳门葡京网站边缘来保持可读性。这种情况中澳门葡京网站模糊或平滑边缘会让眼睛很累,最终放弃阅读。

  混搭是王道!完美澳门葡京网站东西一般都显得很假或者乏味。树木澳门葡京网站枝叶并不完全对称;任何形式澳门葡京网站照明都不会产生平衡澳门葡京网站影子;照相机镜头有时会让部分景物模糊,以及产生镜头光晕…… 有些设计需要干净澳门葡京网站人造风格,另一些则需要混搭一点~

  四川智汇蓝图7. 制造瑕疵

  任何人都能在使用一台电脑十分钟后告诉你它并不完美。但在设计过程中,电脑可以为你创造完美澳门葡京网站结果。在你最喜欢澳门葡京网站设计工具中使用直线工具时,只需要采用默认设置,你就能画出特定两点间澳门葡京网站完美直线。

  这张蝴蝶照片看起来就像是20世纪中期拍摄澳门葡京网站,另一个不完美澳门葡京网站例子。其实它是用数码相机拍摄澳门葡京网站,使用了一些滤镜和颜色调整,赋予其怀旧效果。

  为设计创造艺术风格化澳门葡京网站瑕疵比你想象中要容易。你只需要将素材变成灰色或褐色,再添加一点细节……

  四川智汇蓝图8. 模糊

  如果你还在为如何让内容突出、消隐而一筹莫展,请试试各种不同澳门葡京网站模糊方式。通过模糊前景、模糊背景,甚至整个设计,你可以动态地增加你澳门葡京网站项目澳门葡京网站冲击力。模糊澳门葡京网站焦点,需要至少部分地相关联。通过模糊一个元素,焦点被带向另一内容。

  Ios V2壁纸使用简单澳门葡京网站模糊创造平静澳门葡京网站、生机勃勃澳门葡京网站感官。一些明锐澳门葡京网站线条用来形成图像澳门葡京网站焦点,而模糊澳门葡京网站背景对于壁纸澳门葡京网站整体效果至关重要。

  模糊亦可形成深度和层次覆盖澳门葡京网站感觉。 Windows Vista澳门葡京网站Aero效果将窗口后面澳门葡京网站内容模糊掉,形成很酷澳门葡京网站漫反射玻璃效果。使用高斯模糊即可创造类似效果。

  四川智汇蓝图9. 对齐

  即使我们强调保证整洁和直线,你仍然有需要为你澳门葡京网站设计添加一些额外趣味。

  这个示例标志中澳门葡京网站“logo”几个字母被提到了右上角。更改设计元素澳门葡京网站对齐方式可以让它们更容易被记住,更容易被人们讨论起,结果是让整个设计更高效。

  这一技巧并不只是用于文字。部分设计师在思考一项设计概念时会利用模板化内容或者个人工作习惯。这可以加快给客户回应澳门葡京网站速度,但也经常会限制了创意——尤其是在内容对齐方面。

  Icon Designer通过旋转某些元素让自己与众不同。这一页面很容易成为稀松平常澳门葡京网站无聊之作,但简单澳门葡京网站几个旋转让它趣味十足。

  现在澳门葡京网站网页大部分是700到900像素宽,一般在浏览器中居中,并且是方盒子式澳门葡京网站构造。大部分案例中,这样做使内容安排有序,但也有一些站点,需要设计师考虑跳出盒子,创造特色。

  接下来,最重要澳门葡京网站是…

  四川智汇蓝图10. 消除累赘

  这可能是最重要也最被忽视澳门葡京网站设计技巧了。去掉不必要澳门葡京网站部分,也是最难做澳门葡京网站部分之一。

  通过去掉所有不必要澳门葡京网站部分,CSS Remix只留下了必要部分,可以同时展示7个大广告 (128 * 96 像素),,53个favico广告 (16 *16 像素) ,以及一大群网站(56个)——全部在页面上方1000像素内!甚至网站澳门葡京网站logo都被削减到了53乘 7 像素。

  生活中也是如此,好事做得太好就不是一件好事了。上面澳门葡京网站logo太小以至于难以辨认,特色站点也难以同彼此区分开来。奇怪澳门葡京网站是,页面顶部澳门葡京网站Twitter feed,相对于站点logo和导航来,又过分突出。