当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （9）学生个人作品网站主页设计体会 > 张铁汉
大家好
我是来自清华大学美术学院
信息艺术设计系的张铁汉
今年大三
在这里给大家分享一下
我自己在设计个人作品集网站的
一些经验和一些心得体会
希望我这些学习的过程
能够给大家带来一些启发
这里来讲一下我的作品集
这是我作品集的一个预览图
大家可以看到这个图片
这张图片其实就是我的一个最终的效果
我是如何把最后的这个我的设计
实现成这样的一个网页呢
进入我们的第一部分
叫做个人作品集的设计概述
首先我要给自己问两个问题
第一
我为什么要做这个作品集
这个问题其实很好回答
一个是个人作品的存放处
然后还有就是考虑到
我自己个人要出国申请留学
所以说这个作品是我一个
申请非常关键的一环
所以我在做这个作品集的时候
先把它做成了一个英文版
同时呢
这个作品集也可以用于找实习和找工作
第二
这个网页要包含有哪些内容
这是个作品集
毋庸置疑
所以我想要设想别人想要看到什么
什么是有用的
什么是多余的一些内容
于是我自己梳理了自己内容的框架和布局
先是要有我个人简明扼要的信息
还有简历的链接
还有就是最重要的部分作品集
如果别人看完我的作品对我感兴趣的话
可以快速联系
找到我的联系方式
所以最后一个部分是联系方式
大家可以看到左边这张图
是我的第一个设计稿
和我右边这张最终设计稿的对比
大家可以可以很明显的看出来
最初我没有把这个网站的内容
做得像一个作品集
我对内容梳理得不够好
网页显得比较杂
没有理清楚主要的内容
和次要内容之间的关系
比如我把最重要的作品集的部分
和兴趣爱好放在了同一个层级里
另外这个作品集的Icon非常不统一
导致这个页面没有很好的设计感
最终版的话
我精简了这个导航的内容
并且在背景照片的眼神
也引导着这个观看者
去了解到这个页面最重要的三个部分
就是关于我自己 作品集 还有联系我
讲完我作品集的概述
第二个部分
就是首页界面的设计与制作
第一部分我要设计整体的布局
整体的页面
我采用了长页面
并且用两张
一个系列的高清个人图片作为背景
让它体现我个性化的特点
丰富界面层次
在这个过程中
我去了一些国外的设计网站寻找灵感
比如说Pinterest和Behance
这张图就是我在Pinterest找到的
一个非常重要的灵感来源
其实我借鉴了它一些设计技巧
比如用不同的底色区分内容模块
居中排版和大面积留白
这样会显得比较正式
背景照片的体现也体现了这个作者的特点
接下来我就要设计一下我自己的内容
首先我要确定我要放什么内容
首页的内容一定要一目了然
而且要精简 抓重点
列出所需内容的单子
这是我做的下一步工作
并且我画了一些设计草图
在这里我给大家说一下我自己第二版的一个设计
这个设计就存在一个很大的问题
就是内容太不精简
放了很多本可以写在简历上的信息
比如说
这个skill这一部分
还有自己的出身啊学校啊
教育经历这些东西
其实没有必要直接放在网页上
它其实直接放在简历就可以
有一个简历的链接就就足够了
所以这个空间其实是特别浪费的
如果这么设计的话
会使这个作品集
本身作品集这个模块
在这个界面的比重下降了
那就使这个重点不是更突出
最终把我归纳了很多内容
可读性会更强
那接下来就是整理和制作素材
之前因为我列了一个单子
就是上面写了我自己需要什么物件
比如说自己需要一张个人的照片
还有自己的logo
接下来我就要为这些素材去做准备
比如我自己要拍一些
自己想要的想要的效果的照片
并且做一些后期的处理
然后自己设计自己的logo
这个logo不光是为网站
是作为网站的这个home键
还能让别人对我留下印象
还有就是
当然最重要的就是整理自己作品的素材
接下来就是字体以及色调的统一
我选用的字体是可读性比较强的
Century Gothic和Helvetica
字体本身没有太多的修饰
它本身
这样会显得这个字体会比较正式
而且比较易读
色彩我选择了以黑白为主的主题色
湖蓝色和紫色作为点缀色
然后就是具体的排版
在排版的过程中
其实我也学到了很多
我主要遵循了这三个排版法则
第一就是为了让信息能够快速的被读者获取
关键就在于区分字体的大小
颜色还有粗细
这就是清晰的信息层次
第二就是
行间距一定要合理
同一层信息要统一行间距
两个相对独立的信息之间
间距要大些
在同一层信息中
对齐的方式也要统一
所有的图片都要进行挑选和处理
然后画面尽可能统一
接下来给大家举一个例子
这两张图片
左边一张是我第二版的作品及部分
右边是我最终版
大家可以很明显的看出
左边这一版它每一个信息
每一块文字和图片
它们的间距都过于相似
内容排版没有层次
显得杂乱无章
第二就是图片未经处理
就直接摆放在了一起
显得不和谐
第三就是这个背景底图显得太花
对比度有点强
影响了前面字体的可读性
接下来这一部分
我主要会介绍一些ps的使用方法
因为这个网站我的制作工具是ps
ps是一个特别重要的一个软件
也是一个特别复杂的软件
它的功能特别特别多
但是其实作为一个设计师
未必一定要掌握所有的功能
实现自己想要的效果即可
所以要巧用一些功能
在制作这些网页的过程中
我其实发现了一些特别实用的ps小技巧
和大家分享一下
接下来我给大家展示一下这个ps
新建和参考线的用法
首先
新建一个文件
画布
这个画布的宽度呢是1920
那1920这个数字
其实是在这个所有的屏幕中都是非常适用的
所以说大家可以记住这个数字
以后如果做网页的话
基本上宽度都是1920
接下来这个网页就创建好了
这是一个什么都没有的画布
但是呢它的宽度
是和电脑的屏幕是完全吻合的
所以当这个图片放到百分之百的时候
它是可以正好和这个电脑侧面的
两边的屏幕正好贴合的
接下来我给大家展示一下如何使用这个标尺
首先是Command加R就可以调出这个标尺
大家可以看到侧面这这些标尺
然后选择这个选择工具
然后点击这个上面标尺的部分
然后拖动
大家会发现这个拖动的过程中
在中间 在拖到中间这一块
它会有一个吸附的效果
那其实这个吸附的效果
就是这个软件再告诉你
这根线是中轴线
所以大家在绘制中轴线的时候
就可以巧用这个方法
因为中轴线在这个设计中还是非常关键的
接下来给大家讲一下参考线的一些用法
还有一些其它的用法
它可以用来辅助对齐
比如说像这样的一个我的这个界面
它上面这些文字
其实是遵循的一个左对齐的一个规律的
那它们如何做到左对齐
其呢其实就是靠这个中轴线
我当时在制作的时候
是在这边先拉了一根中轴线
然后再把这些文字填完以后
会发现这些文字的侧面
它会自动的贴着这个中轴线
大家在移动这些文字的过程中
其实也会发现
这个中轴线本身就会让这个文字
对于这个中轴线有一个吸附的效果
所以它就自然而然地
贴附在了这个一条中轴线上
形成了一个左对齐的效果
那接下来给大家讲一下这个投影
PS里头这个投影其实特别常用
大家也可以看到苹果系统这个框
它的这个选项框
它本身就有一个投影的效果
就可以发现这个东西和后面的空间
和后面的这些菜单
可以很好地区分开来
让前面的这个选项框能够特别的显眼
而且有立体感
那这个效果是如何在ps上实现的呢
其实也是这个这个效果
也是非常常用
也不是那么的困难
可以给大家展示一下这个小技巧
首先我给大家先画一个方框
这是一个矩形
然后它本身是一个平面的矩形
它没有任何的投影
那如何在它上面加投影呢
首先你双击
双击这个图层
双击这个图层
然后会出现一个图层样式这个选项
那图层样式其实里面有特别特别多的功能
大家可以看侧面有特别多的功能
我们选择投影这个功能
大家会发现在这个物体上
就会出现了一个阴影
大家可以随意调整这个角度
这个光照的角度是可以调整的
然后也可以改变
也可以不使用全局光
全局光的意思就是说
这个整张画布里头所有的投影
都是朝这个光的方向反方向走的
那我们不使用全局光的话
它就是独立的一个投影光影关系
大家可以看到这个还有其它的选项可以调
比如说距离 拓展
还有它的大小
一般情况下我会把大小调的稍微大一点
这样会显得自然一些
这样可以
距离的话
稍微也调一调
不透明度调的低一点
这样显得自然一些
做一些微调
好的
现在这样的话就会
这样的话
这个投影的效果就做出来
之后再给大家讲一个
另一种图层样式常用的用法
首先也是我们选定
这个比如说我选定这个图片
大家会发现
我如果把这个图层样式给取消的话
它的对比度就变变强了
而且变亮了
但如果我们要使用原来调整它亮度的这些去调整
不是说不可以
但是呢
这个亮度的蒙版
它本身会覆盖下面所有的图层
这样子的话
其实有的时候我们不需要
让下面的图层也受这个这个这个蒙版的影响
那这个时候我们就可以使用一个技巧
叫图层样式
我们不要使用这个
我先把这个这个删掉
然后我现在的目的是
想要调整这个背景图的这个对比度
首先选择图层样式
也是双击
然后点击颜色叠加
大家会发现颜色
它颜色就突然就变深了
它这边有很多混合模式
但一般情况下我们选择正常
不透明度有很多
不透明度其实就决定了什么
决定了这个后面这个选所选的这个黑色
它本身覆盖在这图片上面
然后呢它的这个不透明度
如果越高的话
那这个颜色就越黑
那我们把这个不透明度调到一个适中的位置
这样的话
它背景图就会显得比较统一一些
而且能把前面的这些字啊
这些logo什么的显得更加明显一点
对比度更强一些
最后我来总结一下我的设计
这个设计其实
在这个过程中我经历的特别多
它也是不断的更迭
大家可以从看到这张图
从左到右一直在变化
其实就是不断更迭
它还会更好
我认为其实即使是我现在这个网页
它还是也是有进步空间的
比如下一步我可能还会想改进一下
导航的方式
然后包括一些动效的方式
一些交互的 交互的一些方式
还有调整整体
具体在屏幕上显示的时候
的一些视觉元素大小
毕竟这些是在PS上为主
就是自己做的时候还是放在PS上
它如果真正做成网站的话
它会是什么样
一定要在浏览器下面进行实验
然后一些字体大小与视觉元素的大小
还有间距还有一些细节的话
也要再做一些斟酌
保持清醒的头脑
时刻清楚自己要的是什么
设计的目的是什么
发现问题要敢于推翻重做
不要被技术束缚了自己
但适当的了解一些技术的限制
也很有必要
最好的效果不一定是视觉上最酷炫的
而是最适合设计目的和满足用户需要的
做的过程中时刻听取别人的意见
从用户的角度出发
改进现有的设计
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
