破译Web UI:网页UI设计规范、流程与实战案例
上QQ阅读APP看书,第一时间看更新

引言

首先感谢每一位读者,感谢出版社编辑给我的指导。编写本书是一次探险,更是一次挑战,我很享受这个过程。本书不会禁锢你的思想,不会教你墨守成规地设计网页界面,但会教你有理有据、有约束地设计美观实用和有商业价值的网页界面,会带给你突破自我的可能,会带给你更明确的职业或非职业发展方向。图书是一种工具,我们都要学会善用它,不要被书本的知识所束缚。本书站在朋友的角度,带你进入美妙的阅读之旅,书中的每一字、每一句都注入了我的心血。用心读完它,你可能会因此爱上网页设计。我真诚希望,你能够主动思考我为什么会写这本书?我为何这样去规划图书的内容?当你能够了解我编写本书的初衷时,你就已经掌握了这本书的精髓了。

本书以“学以致用”为核心目标,献给初学网页界面设计、对网页界面设计感兴趣乃至有一定工作经验的网页设计师。在正式阅读之前,得强调一下“界面设计”和“网站/网页设计”的区别。网页设计涉及信息架构、网站结构、可用性、用户界面、用户体验、人体工程学、布局、颜色、对比度、字体和图像,以及图标设计、品牌标识设计、Banner设计等元素,是一个错综复杂的综合领域,所有这些元素组合在一起形成网站;而通常情况下,“设计”或“界面设计”的含义仅仅指视觉方面。在现实中,网页设计包含更多的抽象元素。

本书所有内容都经过作者长期准备,付出了非常多的心血,所有文字都值得读者仔细阅读和品味。我主要运用了独立的思维方式和技巧方法,针对近几年和未来网页设计中的界面设计(User Interface)进行细分讲解,并总结了新的全球热门的设计规范和设计趋势,所有的理论都贯穿实践与运用。本书没有篇幅过大的理论知识体系,没有独立的案例体系,目的是让大家边学习边应用,能有效掌握一些重要的技巧和知识理论,为大家进一步深入学习和实践,并且深入互联网的其他相关领域做一个突破口,同时也能让大家拥有判断自己是否应该继续从事本行业的能力。最终,本书会教会大家如何去思考和解决问题,培养对网页设计的热情。

值得提醒的是,本书不涉及电商推广营销页、店铺页面、游戏页面、活动专题页、门户网站相关的界面设计。但这是一本通用类图书,也适合以上类型的界面设计学习者阅读,能够大大提高学习者在网页设计其他细分领域的设计能力。

本书将引导学习者使用现代化的方式去工作。设计规范是主线,每一个设计规范都是相当重要的,它们能构建一个符合商业习惯和质量的设计,帮助学习者养成一种良好的设计习惯和思维方式。书中的所有案例均来自作者精选的商业项目和针对性项目,希望这些案例可以给读者带来良好的欣赏体验,提高兴趣和带来启示。

书中的案例都详细阐述了笔者的各种思维和技巧,以及使用的工具和参数等,但并不对每一种工具都做详细的教学,这需要读者具备一定的软件基本功。本书第1章将引导读者完成一切准备工作,找到学习目标和方向,掌握必备的基本功。本书并不只是教你怎么做项目,还要讲述设计师对生活情趣的捕捉和态度。

本书中每一句话都是我发自内心的总结,无论你是网页界面设计初学者,还是资深玩家,都值得你去仔细阅读。第1章文字量偏多,主要是给读者提供一个学习方向、思维引导和学前预热。当你读完第1章,你会掌握不少网页设计的“黑科技”,会提高继续学习后面内容的兴趣和能力,有利于你在学习实践过程中总结和思考问题。

· 以不变应万变。每个知识点都能够运用到各类项目中。

· 注重设计规范,注重个人习惯。养成良好的习惯是你未来良好职业方向所必需的基本功。

· 流程模块化。你可以将所学的知识有所取舍地运用到你的实际项目流程中。

· 高质量的界面设计。在你有一定的软件基本功的前提下,本书会让你学会如何思考,如何取舍细节,如何提高你的设计质量。

· 学会研究趋势,学会归纳总结,制订适合自己的学习和工作计划。

· 注重项目的商业价值。以利益为驱动的学习是具有很高的成效的。

如何使用本书?

目录:首先要了解本书的知识体系。根据目录的引导,你可以给自己的网页设计水平和知识结构做一个定位,以便更好地规划自己的学习时间和精力。

资源下载及其使用说明:随书附赠学习资源,包含书中提到的、可以共享学习的PSD源文件及效果文件(因版权限制,部分公司商业案例的源文件不方便提供),这些源文件是非常有价值的,可以用来做对比、参考和分析。读者扫描右侧或封底的二维码即可获得文件下载方式。如果大家在阅读或使用过程中遇到任何与本书相关的技术问题或需要什么帮助,请发邮件至szys@ptpress.com.cn,我们会尽力为大家解答。

笔记:我是一个记性很不好的人,做什么都要记笔记,特别是在学习的过程中。你不妨尝试,在阅读的过程中,根据自己的需要记录笔记。例如,软件中容易遗忘的工具的使用技巧、容易遗忘的创意方式和思考方式、容易混淆的知识点、容易忽略的设计流程等。我使用了那么多“容易”,其实是让你理解,记笔记需要有针对性,不要盲目花时间。

工作、学习环境:每个人都有适合自己的高效率学习环境,我就特别喜欢听着二次元钢琴曲或游戏BGM工作和学习,钢琴曲能阻隔外界的噪声,可以让我思维清晰。大家要找到适合自己的高效学习环境,可以喝着咖啡、听着合适的音乐、抱着可爱的宠物等。电脑是一个会让人分心的设备,所以你可能会需要一些东西来协作。

英文词典:设计过程中难免会遇到一些生僻的英文单词,并且本书中的案例所使用的大部分插件是英文原版,如果你在学习过程中有不明白的地方,还需要你主动利用词典或APP,熟悉那些不懂的单词,这样会有助于你对软件或设计的理解。

标注:书中图片看不清的地方会有文字标注,可以在随书附赠的下载资源中查看高清大图,帮助大家更好地学习本书的案例。

特别注意

作为设计师或开发人员,软件和电脑是必不可少的。应将你的Photoshop等软件尽量更新到较新的版本(CC2015或2017版本),并掌握基本的软件操作能力,稍微熟练软件使用技巧,只要书中有实践、有截图的地方,你就要根据情况,打开软件,边看边练习。只看不练,你会很容易忘记软件使用方法的。如果你还没有软件基本功,可以先将这本书收藏,去学习一些软件的使用方法,特别是Photoshop基本功要扎实,否则你会跟不上进度。当然,在本书第1章,我也会将常用的软件要求都做一下介绍,让你在自学软件时更有针对性,更有效率。