PS 在版式设计和网页设计中的应用

百度俱乐部技术分享 Talk In USTC(TIU) 第一期

PS 在版式设计和网页设计中的应用

分享人：朱成2013 -11-10



1 设计中遵循的基本原则

2 当前网页的设计趋势

3 PS 的 Demo 设计与切图功能


1 设计中遵循的基本原则


亲密性（ Proximity ）　　彼此相关的元素应当尽量靠近，归组在一起。

对齐（ Alignment ）　　每个元素都应与页面上另一个元素有某种视觉联系。

重复（ Repetition ）　　可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等，

增加条理性和加强统一性。

对比（ Contrast ）　　避免页面上元素太过相似。如果元素不相同，就让它们截然不同。

设计的四大原则‘


《写给大家看的设计书》—— RobinWilliams世界著名的设计师、技术专家和畅销书作家通过写书和授课，她已经影响了整整一代数字设计师



1 亲密性原则实现组织性


　　

物以类聚，人以群分！“ 亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起，使其被看作是一个密切相关的整体，而不是一堆杂乱无章的元素。

亲密性 (proximity)‘


　信息的分类整理元素重新组合，形成清晰明了的结构最短的时间内获取页面中的正确的内容版式设计的第一步

‘ 亲密性 (proximity)


‘ 亲密性 (proximity)


亲密性 (proximity)根本目的

• 实现组织性。将相关的元素建立亲密性，更容易阅读，还可以使空白更美观。

如何实现

• 眯起眼睛，统计眼睛停顿的次数，来数数页面上有多少元素；

要避免的问题

• 不要仅仅因为有空白就把元素放在角落或者中央；

• 避免一个页面上出现太多的孤立元素；

• 不要在元素之间留出同样大小的空白，除非它们属于同一个子集；

• 在有很近亲密性的元素间建立关系；

• 不属于一组的元素不要建立关系，分开。

‘


2对齐原则使页面统一且有条理


对齐原则即是在视觉上串起差异化元素组合之间的那根线，即是保证元素之间的统一性

对齐 (Alignment)‘ 推荐使用一种统一的对齐方式不建议使用居中对齐


在明白对齐的规则之后，可以试着有意识的去打破这个规则

对齐 (Alignment)‘


对齐 (Alignment)‘ 根本目的　使页面统一且有条理

如何实现　每个元素都能找到与之对齐的元素。

要避免的问题• 混合对齐• 居中对齐


3重复统一并增加视觉效果


拥有良好的组织性，同时保证了元素间的统一性，但很有可能缺乏一致性。设计中视觉元素的重复可以将作品中的各部分连在一起，从而统一并增强整个作品我们需要的是一种控制读者眼睛的技巧

重复 (Repetition)‘


帮助读者形成浏览的一致性的感觉



重复原则并不仅仅只是表现在字体上，页面中任何一个元素都可以成为设计中重复的对象：字体、字号、颜色、图案，甚至是版式。切记物极必反，是时候打破规则！

　　



重复 (Repetition)‘ 根本目的• 重复的目的就是统一，并增强视觉效果。

• 不要低估页面视觉效果的威力，如果一个作品看起来很有趣，它往往也更易于阅读。


‘ 重复 (Repetition) 网站设计中重复性 ( 一致性 )

• 一致的网站标志和导航栏

它们可以说是最体现网站特征的部分



• 一致的页面布局如果某些页面的等级是一致的，

那么它们的“包装”风格也应是一致的，

用户应该使用同样的浏览方式来阅读这些网页。



• 一致平衡的信息结构网站每个栏目的信息量应当合理分配。除了一些特定的内容（例如“网站地图”

和“联系方式”），所有分支的信息量应当相对平衡

• 一致的重复性元素如果使用了文本框，那么网站中所有文本框的形式都应当一致。

• 一致和谐的字体和色彩



• 避免类似的元素简单的罗列

•“ 一致”不等同于“相似”


4对比原则增强页面的效果和组织性


‘ 对比 (Contrast) 通过视觉上的强烈差异化来增强页面的效果，以及强调元素之间的差异性。帮助浏览者可以轻易的区分出哪里是标题，哪里是正文内容当出现了对比，突出了视觉重点，也即可以吸引住浏览者的视觉焦点。


对比要强烈！过于强烈的对比，导致某些元素容易被忽视

对比 (Contrast)‘


根本目的• 增强页面的效果，增加有可读性

• 有助于信息的组织如何实现

　可以通过字体、线宽、颜色、形状、大小、空间等等来增加

对比。重要的是：对比一定要强烈。

要避免的问题　如果各个项不完全一样，干脆让它们截然不同！

‘ 对比 (Contrast)


虽然不可能说让设计变得非常精美，起码也可以让读者在扫视后快速正确的获取到设计中所想表达的内容。



2 当前网页的设计趋势


网页的设计趋势‘ 响应式网页设计（ Responsive Web Design ）

全屏网页设计（ Full Screen Design ）视差滚动设计（ Parallax Design ）扁平化设计（ Flat Design ）滚动侦测网页设计（ Scrollspy ）无限滚动模式

——Tencent CDC Blog


3 PS 的 Demo 设计与切图功能


遵循基本的设计原则

风格元素的加入• 平面设计感的加强

• 注重字体设计

• 丰富灵活的动画

网页 Demo设计‘


切片定义• 切片是图像的一块矩形区域，可用于在结果 We

b 页中创建链接、翻转和动画。将图像切片使您得以有选择地优化图像以便于 Web查看

• 其主要作用是以大化小，化整为零，从而加速站点页面的下载速度

切片类型• 使用切片工具创建的切片称为用户切片• 从图层创建的切片称为基于图层的切片• 创建新的用户切片或基于图层的切片时，将生成占据图像其余区域的附加自动切片

PS的切片功能‘


先横向切割，再将每一行细分成小块• 有利于后期用 Dreamweaver表格来排版

保留完整的图片，防止一张图片被切开

首先保证切出后期需要交互的部分

切片图像的大小要尽量保持小的数据量

切片步骤及要点‘


切片步骤及要点‘ 属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在 X或在 Y方向上没有变化属性渐变的区域适合分为一个切片，渐变有两种表现形式


4 论设计者的自我修养问题


个人的一些体会

美术基础的巩固以及个人阅历的丰富

通过不断的阅读浏览来激发设计灵感

养成良好的知识管理和素材收藏习惯

精通一样工具并且不断地尝试新工具

‘


Thanks ！Who is the next ？

PS 在版式设计和网页设计中的应用

Documents

Transcript of PS 在版式设计和网页设计中的应用

PS 在版式设计和 网页设计中的应用

Documents

Transcript of PS 在版式设计和 网页设计中的应用

PS 在版式设计和网页设计中的应用

Transcript of PS 在版式设计和网页设计中的应用