破译Web UI——网页UI设计规范、流程与实战案例(txt+pdf+epub+mobi电子书下载)


发布时间:2020-05-22 23:54:14

点击下载

作者:Chuckie Chang

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

破译Web UI——网页UI设计规范、流程与实战案例

破译Web UI——网页UI设计规范、流程与实战案例试读:

内容提要

本书着重讲解Web UI设计的原则、方法和应用。按照“知识点分析—知识点深入与扩展—归纳与运用(全面案例讲解)—新技术的拓展”的进阶结构来讲解,让读者能够循序渐进地、更科学地学习。

全书共9章,第1~8章内容涵盖工作的准备阶段、线框图设计、Web网格布局、Web界面设计基础参考规范、Web界面设计高级参考规范、Web设计用户体验、Web界面设计实战和网页设计新趋势(MDL),讲解贯穿实际设计案例,帮助读者梳理工作流,融入设计理论,并教会读者如何思考、如何应用理论,进而能以不变应万变。最后一章对设计师的个人发展提出了一些建议,分享了一些经验。

随书附赠书中核心案例的PSD文件,供读者学习、参考。

本书适合有一定Photoshop软件基础的设计初学者、相关专业大学生及想要进阶的Web设计师阅读。

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

如何使用本书?

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

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

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

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

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

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

特别注意

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

作为一名专业从事网页设计的设计师或设计开发爱好者,需要配备基本的硬件和软件,如表1-1所示。表1-1 设计师必备的硬件和软件

建议大家在学习本书时边学习边使用电脑(计算机,俗称电脑),否则最终效果可能不理想。笔者比较喜欢Adobe系列的软件,本书都是基于Adobe软件进行讲解。也有其他用于设计和开发的工具,大家根据个人情况选用软件即可,本书所讲解的思维方式和设计方法可以通用。1.1.2 工作环境

这里所说的环境既是一个具象的概念,也是一个抽象的概念。环境对于一个人的影响是很大的,笔者认为从事网页设计的环境包含了以下方面。

· 工作环境:你所在的公司,或你办公的硬件设施条件,是否能够满足你正常的工作、休息、锻炼、餐饮、娱乐、精神等需求。

· 行业市场环境:你所在的国家和城市对于网页设计的用户需求,以及网页设计的市场份额、技术需求、人才需求、人才分布、就业状况、失业、跳槽等状况对你的职业规划产生的影响。

· 版权意识:你所在的国家和城市的不同人群对版权、对创作者劳动成果、对产品许可证等的认知和尊重程度甚至会直接影响你的设计质量、素材来源和从业心态。

· 购买环境:网页设计细分领域(界面设计、前后端开发、服务器、空间域名、云计算、SEO、后期维护等)的性价比、供求量、转化率情况对你的决策、发展方向、生存现状可能产生影响。

· 团队:团队内部人员之间的协作、社交、分享、竞争等一系列人与人之间的问题可能会给你带来困惑。

· 公司文化:一个企业在经营发展过程中可能会对员工、产品、团队、市场、行业产生的利弊。1.1.3 知识储备

当然还存在其他影响你从事网页设计的因素,它们都会对你的学习工作和生活造成很多影响,甚至涉及你未来的职业选择。

如果你所处的环境比较差,不要灰心,你可以想办法为自己创造较为良好的环境,以更好地学习和工作。总之,任何人都不要小看周围环境对自己的长期影响。

其实网页设计这一行业在全球的受欢迎程度是很高的。可能你是初学者,可能你不知道如何设计好网站,因此你需要深入了解网页设计的项目准备工作,这也是进一步学习本书而需要具备的知识储备,可以帮助你更好地消化内容,提高你的网页设计技巧。

在这个行业,你不一定要知道一门编程语言。当然,如果你有能力学习掌握一门或多门编程语言,就能够更好地设计一个网站、把控一个项目,更好地处理协作问题。互联网已经是一个多元化行业,无论是UI还是Web,行业本身已经多元化,对从业者的能力要求只会越来越高,竞争只会越来越激烈。本书专注界面设计,下面列出的是一些与网页界面设计密切相关的知识,由于体系庞大,这里只是点到为止,作为大家预热和思考的切入点。

· 学习目的:学习网页界面设计是为了工作、兴趣爱好或副业,还是作为其他行业的辅助工具?

· 软件工具:熟悉并掌握各种软件,是否就能做出漂亮的、有商业价值的网页界面?你是否了解软件之间如何协作、如何更好地提高设计质量和效率?

· 编程语言:是否需要学习HTML、CSS、JavaScript、jQuery、XML、PHP等编程语言?如何规划学习时间?如果只是单纯UI设计,如何与开发人员协作?设计过程中如何降低返工率?

· 用户体验:这是一个很抽象的概念。设计过程看似简单,其实很复杂。看似复杂,其实也没有那么复杂。你的设计所面对的用户群体是哪些?是否能让用户喜欢?是否能让用户正常、方便地使用?你是用什么样的方式传达你的设计思想?你的设计如何表现细节,如何从细节上提升用户体验?这些都是用户体验需要考虑的问题。

· 交互设计:这也许是一个更加抽象的概念。你是否能理解用户与你的设计之间的关联?交互设计过程中的用户体验因素如何影响你的行为?如何衡量自己设计的产品的界面美观程度、功能、可用性、情感等因素?

· 移动网页:是否能够理解APP和Web语言的关系?是否能分清响应式设计和自适应设计?如何设计移动网站界面?响应式网站的必要性和市场需求是怎样的?

· 运营推广:个人网站、企业网站、产品网站分别是如何运营和推广的?你的设计的商业价值何在?假如没有商业价值,如何去转化?作为公司或个人,在处理设计时的流程和态度,会有什么不同和可能性?

前面提到的知识大多比较抽象,笔者只列出了一部分经常会思考的问题,为大家提供一个思考的方向。这是一个非常漫长的积累过程,它们和界面设计、整个网页设计领域,甚至跨领域,都是息息相关的。重要的是我们应该如何思考,如何利用搜索引擎和相关图书解决这些问题。本书会有少量内容涉及这些比较抽象的问题,由于它们涉及的知识体系非常庞大,也没有必要在本书中着重讲解。利用每一个知识点,都可以编写出一本甚至多本专业图书,如果大家对这些知识的深入研究感兴趣,可以利用其他渠道专门学习。1.2软件必备知识1.2.1 了解Photoshop

• 为何首选Photoshop设计网页界面

设计网页界面的工具多样,如Sketch、Photoshop、Illustrator、InDesign等,还有类似Wix的线上平台。那么对于网页设计,到底什么样的工具更高效、更有优势呢?笔者推荐Photoshop,那么就让我们一起来了解为什么这款软件能脱颖而出。

第1点:与前后端开发人员更好地协作(重中之重)。如图1-1~图1-4所示,从软件界面中可以清晰地看到各种参数。图1-1图1-2图1-3图1-4

第2点:不需要编写代码即可设计网页效果和概念图。

第3点:能够快速导出网页所需要的资源和素材。

第4点:适配不同设备的屏幕尺寸,如图1-5所示。图1-5

第5点:方便展示不同的Web改编版本,如图1-6所示。图1-6

第6点:基本的原型准备,如图1-7所示。图1-7

第7点:能够通过视觉传达直观地获得用户反馈,找出设计缺陷,展示设计效果。

第8点:能够更方便地处理网页所需要的图片、图标、特效和字体。

第9点:代表了一种新的工作流程的升级和演变。

• Photoshop CC版本的优势

有的人比较懒,或者不想接受新事物,不想学习新功能,甚至很多年过去了还在使用老版本的Photoshop,但是每一款软件升级都会有它的必然趋势和优势。作为一名设计师,我们不能将“趋势”丢于千里之外,软件趋势、市场趋势、设计趋势、技巧趋势,这些都是需要我们发现并接受的。使用高版本的Photoshop,不仅仅能够提高我们的工作质量和效率,还能够改善我们的思维方式,养成好的设计习惯。下面,我们来看看较高版本Photoshop的一些容易被忽略的技巧。图1-8所示为Photoshop CC 2017的初始界面。图1-8

第1点:支持不同设备分辨率选择,提高准确性,如图1-9所示。图1-9

第2点:支持字体收藏选项,极大地提高设计效率,如图1-10所示。图1-10

第3点:更加稳定地支持矢量图svg格式直接导出,如图1-11所示。图1-11

第4点:默认附带更强大的参考线网格系统,避免出现新版本软件不支持常用网格插件的问题,如图1-12所示。图1-12

第5点:可以智能识别并匹配图片字体,如图1-13所示。图1-13

第6点:可以建立多个画板,简化设计过程,加强对比,如图1-14所示。图1-14

• 需要熟悉并掌握的Photoshop CC工具和技巧

以下列出了学习本书所必须掌握的Photoshop基本功能和常用的一些工具,就不做截图介绍了,大家很容易通过其他渠道找到和学习这些基本功能,本书只是点到为止。希望基本功不够扎实的读者按照下面列出的内容进一步学习。

· 熟悉Photoshop面板,以及菜单栏、属性栏、工具栏的位置和名称。

· 熟练使用形状工具。

· 熟练使用颜色填充、选区工具。

· 熟练使用钢笔工具。

· 熟练使用图层、图层选项和图层的混合属性。

· 熟悉图层叠加模式。

· 熟练使用蒙版和调节层。

· 学会使用参考线和参考线网格。

· 熟悉Web图片格式的输出。

· 熟悉压缩PNG图片的方法(Mac:ImageAlpha;Windows:PNGoo)。

· 熟悉文本工具及其属性,包括字符样式、段落样式的使用。

· 熟悉字体属性面板。

· 熟悉对齐工具的使用方法。

· 熟悉色板的新建和使用。

· 熟悉自定义填充形状的使用。

· 熟悉基本的画笔工具的调节和使用。

· 熟悉基本的饱和度、色阶的调节。

· 熟悉快速选择当前图层的技巧。

· 熟练使用快速切换文本工具大小写的快捷键(【Ctrl+Shift+K】键)。

· 熟悉其他常用快捷键,学会自定义快捷键、自定义工作面板,提高设计效率。1.2.2 切图技巧

Dreamweaver一直受开发者青睐,它具有非常强大的功能和扩展性,给前端和后端开发人员提供了很多便利。我们创作设计稿,都需要考虑如何与Dreamweaver协作,如何切图以供Dreamweaver使用。这部分我们将分别讲解Photoshop和Dreamweaver两个软件的切图技巧。

• 使用Photoshop高效切图

网页界面,单独来看它是不具备商业价值的。任何网页都是需要浏览器或其他设备来供用户浏览和使用的,因此UI设计师应该时刻考虑与前端的协作问题,考虑设计是否适合切图、是否利于开发和扩展、是否适合响应式。

网页设计发展很迅速,各种各样的高端技术都可以运用到网页设计上,那么响应式设计自然是一个最基本的、必须满足的设计需求。现在无论设计哪种Web界面,都必须考虑不同设备不同分辨率的效果和兼容性,只顾PC的时代已经过去。但是,在项目中为所有图像创建众多不同的分辨率版本可能会是一项艰巨的任务。笔者根据自己的经验,列出了一些PSD文件与Dreamweaver协作的处理方式。

本书中讲解Dreamweaver的协作,是希望能够扩展大家的思维,能够帮助大家更好地运用Photoshop设计实用的界面,而不单纯只是设计一个漂亮的界面。当然,这并不是要求大家一定要会使用Dreamweaver,或者一定要学习编码。以下列举的几个方面,是笔者认为比较高效、准确性高的切图方式。以前我们可能会使用Photoshop自带的“切片”工具,但是其实我们需要更有针对性地进行切图。建议将以下示例中的所有重要数值整理成一个txt或word文档,以便更好地让开发者参照。

01 选中当前图层,单击鼠标右键,选择【快速导出为PNG】或【导出为】菜单项,单独导出图像,常用JPG、PNG、SVG格式,如图1-15所示。图1-15

特别注意

如果当前元素由多个图层组合而成,应该同时选择这些图层,单击鼠标右键并选择【转化成智能对象】,再使用快速导出功能。

如果不合并为智能对象,可以使用【剪裁工具】,单独储存为图像(此时文档已经被剪裁,不要保存PSD文件),储存图像后“后退”一级,恢复到剪裁前的文档。

直接通过图层选项快速储存的PNG格式图片,可以使用第三方软件进行压缩(Mac:ImageAlpha;Windows:PNGoo),或者使用在线平台TinyPNG进行压缩。

直接通过图层选项快速储存的JPG格式图片,尽量再次使用Photoshop自带的【存储为Web所用格式】功能进行压缩。

02 使用【标尺工具】精确测量需要用到的尺寸,记录数值,如图1-16所示。图1-16

03 使用【吸管工具】取色,并记录色彩值(必要时应该记录RGB值),如图1-17所示。图1-17

特别注意

选择【吸管工具】,用鼠标左键单击不同的色彩,在【颜色】面板里也会有显示。

04 选中当前图层,单击鼠标右键复制CSS样式,然后粘贴于文本框中,记录图1-18所示的数值,供前端开发人员使用。如果你不太清楚记录哪些数值,可以直接将代码记录下来提供给开发者参照。图1-18

特别注意

尽量使用形状工具绘制图层。如果存在图层样式,不要转化成智能对象,否则无法读取正确的CSS3数值。

• 使用Dreamweaver高效切图

前面我们使用的是Photoshop软件来获取切图信息,以下我们将使用Dreamweaver来获取PSD文件的信息。前提是我们需要将PSD文件上传到CC库中。由于我国的网速不一定能够满足每一个设计师,可能存在上传错误或无法上传的问题,但是使用Dreamveaver快速读取PSD信息的方法,还是值得大家学习了解的。

01 从菜单栏的【窗口】中打开Dreamweaver的【Extract】(提取)面板,我们可以看到官方默认的PSD演示,如图1-19和图1-20所示。图1-19图1-20

02 定位到PSD文件的图层,可以看到详细的数值信息,如图1-21所示,这些信息都可提供给前端开发人员使用。图1-21

03 上传PSD文件后即可使用提取功能,如图1-22所示。图1-22

特别注意

如果需要深入了解提取功能细节,可以参考Adobe官方指南。1.2.3 文档标注技巧

在文件交接过程中,我们通常需要对设计图进行标注,配合我们的切图来帮助前端开发人员完成工作。每一个界面设计师都希望成品网站能够高度还原自己的效果图,但是往往事实并不是如此。理想很丰满,现实很骨感,这就要求设计师和开发者有更好的协作能力。

对于标注,如果单纯使用Photoshop,效率会比较低,而且很不方便。我们可以使用一些第三方软件或云平台帮助设计师进行标注。笔者推荐Assistor PS这款第三方应用,它能够兼容最新版本(CC2017)的Photoshop,而且效率极高,对于一个热衷于Photoshop的设计师来说,是最好不过的选择。Assistor PS拥有多种功能,这里我们只需要掌握它的标注功能即可,其他功能一般是直接使用Photoshop来完成。

01 首先下载并安装Assistor PS,然后打开Photoshop软件,如果成功兼容,可以看到操作面板,如图1-23所示。图1-23

02 选中一个或多个要标注的图层或文件夹,用鼠标左键单击【Size】按钮,即可标注对象的尺寸,如图1-24所示。图1-24

03 选中要标注的图层或文件夹,用鼠标左键单击【Spacing】按钮,即可标注对象到画布边缘之间的距离,如图1-25所示。图1-25

04 选中要标注的文字图层,用鼠标左键单击【Type info】按钮,即可标注文字的详细属性,如图1-26所示。图1-26

这里还介绍一种笔者自己的标注方法——使用灯箱效果来标注图片,这种标注方法也很简单,直接使用Photoshop的线条和文字工具即可,如图1-27所示。它有以下几个优势。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载