|| 前言
入秋的上海，天气变起脸来宛如姑娘的脸，作为季节敏感性患者的身心也被带的起伏不定，整个人处在一个混沌烦躁的状态，只想窝在空调间里保持恒温和理智。但是大师有云：在混乱的状态中，只有脚踏实地地观察和积累才能寻找到真正值得信赖的方向。正好借此机会梳理顺畅最近的吸收和实践，做个反思，提醒自己以后少犯同样的错误少跳同样的坑。顺便告诉自己：你有在往前走，你正在积累和沉淀。而且，写作也是一种设计啊:)那今天，就从以下这五点，来聊聊从零到一去制作实现网页设计——
1 确认网页类型
2 制作灵感版/情绪版
3 确定网页内容结构
4 绘制交互效果
5 对比实现效果与设计稿的差距
|| 正文
1.确认你的网站类型
不同的网站类型其实有不同的制作方式和体现方法，比如：你要找工作，可能会为自己做网页简历，那你需要侧重的就是你的工作经历、节能专长的体现；新闻网页，则需要更多更全的目录分类…所以，不同方向的网站，有不同的侧重点和表现方式。
这次我制作的是公司网页。好比说一个人的着装形象是他的门面，那么每个企业都需要网页来作为自己的门面，对外展现自己的能力、介绍自己的产品与服务等等。一般情况下，企业网站设计同行包括以下几个模块：首页、产品与服务、公司介绍、公司团队、联系我们等等。
企业网站通常包含的模块
2.制作灵感版/情绪版
确定了网站类型，接下来就该制作灵感版，可以称之为“风格”的确定。为了让消费者达成品牌认可，一般情况下企业的风格主要以高大上为主。但是这也不是说死的事情。在实际情况中，需要结合企业形象，企业文化，工作氛围，服务对象等因素。
制作灵感版的目的，是为了寻找配色方案和结构分布方案，去借鉴学习优秀的网页设计，帮助自己在设计的时候做到良好的信息传达。
在这里，有人会说，你这样找寻灵感版，最后是不是就是抄袭了？
并不然。如果你看过原画师在绘画之前找情绪版。你会发现他们找的图和最后的成品图差了十万八千里。当你在实践操作的时候便会明白了。有的时候，你制作灵感板不是为了照葫芦画瓢，而“原创”二字也并不代表你什么都不看什么都不思考就凭空造大楼。优秀的配色方案和网页布局有的时候反而会帮助你解决一些问题，比如：我的banner信息是否需要使用轮播图，它的存在合理吗？我需要走极简风还是大面积使用色块和阴影？这些方案符合企业定位吗？
而当你带着问题去制作灵感版的时候，你便是在寻找答案，而非抄袭。
灵感板采集
3 确定网页内容结构
根据你拿到的文档和图片，在大方向确定的情况下，去解构段落的内容层级。这就有点像小初高的时候对于文章进行分段总结一样。在骨架搭好的情况下，去进行适度的装饰。而装饰就如同穿搭，多试试，总可以找到合适的风格。想清楚，哪些内容重中之重，适合放在首页，而哪些内容适合放到分页去详细展示。不断剥离简化。这里拿我的一张修改图(就是废稿啦)作为例子。
但是需要注意的一个细节点是，有些排版设计使用英文字体显得或大方高雅，或创意十足，对于排版也十分优化。但在中文字体的衬托下，这些好看的排版设计便会水土不服，显得不伦不类。了解常用的中文字体，先不出错，再去创新。
页面内容结构
通过这张修改稿，其实“老法师们”很容易发现问题：太复杂。
为什么会这么说？
01 设计偏复杂。用户在网站的主要目的是蝠：找寻信息，而不是来享受设计。
02 留白不够。对于不同分辨率的显示器，有的时候充足的留白才可以保证界面的自适应。优秀的留白方案会清晰划分内容结构，同时帮助减少用户的认知负担，更快寻找到有效信息。
03 界面不够清晰重点。所有的组件都应该具备区分性，保留最简单最重要的信息。
所以，适度装饰可以有，但必须是服务于“核心信息的展示”这一基础之上。同时在装饰完成之后思考，是否还可以删除精简。
4 绘制交互效果
此处进行交互效果绘制的时候，一定要和前端开发人员反复沟通。不要自作主张，你觉得酷炫的交互效果，可能最终导致坑人坑己，大家都不满意的局面。最好多沟通。永远要记住，设计虽然作为实现的先前环节，但是如何让设计稿平滑过渡进开发阶段，这也是一个设计人员该思考的问题。必要的时候，自己去了解开发框架，页面实现，交互动画的制作，做到心中有数。多学习一点，多懂一点，彼此之间的开发效率和磨合速度才会大大提升。友谊的小船才不会说翻就翻。
除非这是一个你心中有数的动画效果_(:з」∠)_
图源：Behance
5.对比实现效果和视觉稿的差距
这里所指的是在开发人员实现过程中，设计人员依旧需要保持沟通交流，需要对比实现效果和视觉稿之间的差距。即使修改，也要保证尽量在排版内容和视觉统一的大前提去修改优化。不要一言不合就重设，因为重设简单精修难。同样的，重设意味着前期所有的沟通开发全部打了水漂，不到万不得已不要去这么做，反复修改也会导致设计人员陷入一个自我怀疑的怪圈。出去散散步，看看电影读读书，再回头看，会有新的想法和思路。
今日宜
|| 总结
可以发现的是，每一步不可缺少的内容就是：沟通沟通沟通！沟通万岁！每一个反复修改甚至重设的背后所暴露出来的问题，其实是沟通问题。其次，什么事情先别急着下手，谋定而后动。
遇到问题当然需要解决问题，但是解决问题就是立马动手去修改吗？
前期思考的环节多一点远一点，寻找相同思路的解决方案，再优化再调整，从中再进行总结，这样才能保证和开发哥哥姐姐们友谊长存(噗)。为这两天思路不清的自己感到羞愧(:з」∠)
好了，顶着锅盖继续加油！挥👋
网友评论