触动人心的手机端页面设计 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

林琼 著

图书标签:

• UI设计
• 用户体验
• 移动端设计
• 网页设计
• 交互设计
• 设计原则
• 情感化设计
• 用户心理
• 设计模式
• 可用性测试

出版社： 电子工业出版社

ISBN：9787121287589

版次：1

商品编码：11953074

品牌：Broadview

包装：平装

开本：16开

出版时间：2016-05-01

用纸：胶版纸

页数：192

正文语种：中文

产品特色

编辑推荐

　　

手机端的营销迅速崛起，这让很多设计师们应接不暇，手机端的设计应该怎么做？如何去做好手机端的设计？

尚未成熟的手机端设计路线，让众多设计师们很苦恼。

手机端设计是一个新的设计方向，它在屏幕、色调、营销角度等方面不同于PC端。在设计上，手机端的要求会与PC端也有很大不同。

本书将解决你的这些困惑！

资深高级网站设计师，历经多年美工设计实践与研究，亲历手机端设计从雏形发展到今天，倾情解读有关手机端页面设计的一切关键要素，细致准确的要点解析、详实全面的案例分析，即使设计新手也能快速做出令人惊叹的“高大上”页面！

　　

内容简介

　　

这是一本结合目前手机端页面潮流的设计书，除了详细讲述手机端页面设计的各个要点（包括字体、颜色、字号、留白、布局等），还列举了众多实例（包括淘宝、唯品会、京东、Apple手机、途牛等大型手机网站页面）来帮助读者提升审美能力。全书从基础入门，图文并茂地细谈手机端的版式、细节、配图、配色等，在各个重点上帮助读者掌握手机页面设计的要领；然后传授完整的设计分析；最后通过营销角度来点评作品，让新手看完本书之后，不仅懂得怎么做一个手机页面，更懂得如何设计适合营销的手机页面。

为了便于读者轻松提高，本书还介绍了一些PS小技巧（涉及配色、配图、字体设计等），并传授了一些从事页面设计必备的软件应用知识（涉及Ps Play、ColorSchemer Studio等软件），帮助广大设计师更好地掌握页面设计的精髓，从而得心应手地设计出优秀作品。

作者简介

林琼 网页设计师，9年网页设计经验，熟悉网页设计发展趋势，拥有丰富的网页设计经验与技巧，对营销型网页设计有着深刻的理解，商用手机页面作品数量已过百，PC端页面设计作品更是数不胜数。曾为多家企业、医院、淘宝店铺做过各种不同的页面设计，并很好地应用在互联网中。对于页面设计的发展潮流，有着独到且敏锐的洞察力。

内页插图

精彩书评

　　

很实在的一本书，讲得很详细。对于新手，会有很大帮助。

——康冠网络公司品牌总监 丁哲

这本书一开始很基础，每个设计点都考虑到了，后面的提升看出了作者水平，不赞不行了。

——全球网络公司网络总监 贾振羽

书中的例子很好，很喜欢举例部分，说得都很实在，又容易理解，很有参考价值。

——易云科技公司设计总监 李鹏

真材实料的书啊！没有一定水平是写不出的，推荐在学手机端页面设计的同学们都看一看。

——杰作网络公司营运总监 陈明

　　

目录

第1部分 手机端设计的趋势

第1章 手机上网已成主流 / 3
1．1 手机端用户到底有多少 / 4
1．2 手机端设计的分类 / 4
--1．2．1 APP / 4
--1．2．2 手机端网站 / 5
--1．2．3 其他页面设计 / 7
1．3 小结 / 7

第2章 手机端相关市场调查 / 9
2．1 手机品牌与屏幕尺寸统计 / 10
2．2 手机屏幕分辨率统计 / 11
2．3 Photoshop 小技巧 / 12
2．4 小结 / 14

第2部分 细谈手机端页面设计 / 15

第3章 手机端页面设计的预备知识 / 17
3．1 了解手机用户的视线 / 18
3．2 手机端2 秒原则 / 20
3．3 小结 / 21

第4章 手机端页面架构 / 23
4．1 手机引导页 / 24
4．2 手机网站 / 25
--4．2．1 单屏手机站 / 26
--4．2．2 其他手机站 / 27
4．3 手机专题 / 29
--4．3．1 单屏滑动专题 / 29
--4．3．2 整页专题 / 30
4．4 小结 / 32

第5章 手机端页面设计元素 / 33
5．1 文字设计 / 34
--5．1．1 字号的选择 / 34
--5．1．2 字体的选择 / 35
5．2 颜色设计 / 37
--5．2．1 选主色 / 37
--5．2．2 对比色 / 41
--5．2．3 相近色 / 45
--5．2．4 选色工具 / 46
5．3 图形设计 / 49
--5．3．1 单个形状的应用 / 49
--5．3．2 多个形状的应用 / 52
--5．3．3 Photoshop 形状小技巧 / 53
5．4 留白很重要 / 56
--5．4．1 整体留白 / 56
--5．4．2 局部留白 / 61
5．5 布局设计 / 62
--5．5．1 上下布局 / 63
--5．5．2 左右布局 / 64
5．6 页面配图 / 65
--5．6．1 icon 的选择 / 65
--5．6．2 其他图片搭配 / 67
5．7 小结 / 69

第6章 手机端页面设计提升 / 71
6．1 主流设计 / 72
--6．1．1 扁平化设计 / 72
--6．1．2 扁平立体结合 / 76
--6．1．3 扁平技巧 / 78
--6．1．4 Photoshop 制作长投影 / 79
--6．1．5 制作不规则图形 / 83
6．2 Banner 设计 / 87
--6．2．1 Banner 的尺寸 / 87
--6．2．2 选用字体 / 89
--6．2．3 背景配图 / 91
6．3 图文并茂 / 93
--6．3．1 文字融入图片 / 93
--6．3．2 图文分离 / 95
--6．3．3 出格立体感 / 96
6．4 字体设计 / 97
--6．4．1 硬字体 / 97
--6．4．2 软字体 / 98
--6．4．3 立体字体 / 99
--6．4．4 Photoshop 制作字体 / 101
6．5 点线面的组合 / 106
--6．5．1 点 / 106
--6．5．2 线 / 107
--6．5．3 面 / 108
--6．5．4 点线面结合技巧 / 110
6．6 营销型页面 / 114
--6．6．1 网站营销概念 / 114
--6．6．2 营销型网站要点 / 115
--6．6．3 手机营销网站的技巧 / 117
6．7 小结 / 118

第3部分 案例分析

第7章 优秀手机端页面解析 / 121
7．1 购物类手机网站 / 122
7．2 信息类手机网站 / 138
7．3 行业类手机网站 / 151
7．4 手机专题页 / 170
7．5 手机页的各类广告 / 177
7．6 小结 / 182

前言/序言

　　随着互联网越来越发达，智能手机迅速普及。根据中国互联网络信息中心（CNNIC）发布的第37次《中国互联网络发展状况统计报告》，截至2015年12月，我国网民中，使用手机上网的比例为90.1%，其中仅通过手机上网的网民占18.5%。近几年，移动通信技术从2G一直升级到现在的4G，再加上各地逐步免费开放的Wi-Fi，人们从以前单一使用电脑进行网上冲浪，到如今将大部分时间都转移到了更加方便的手机上网。很多网民使用手机上网的时间，已经远远超过了打电话的时间。手机带来的便利，使得越来越多的人注意到了手机所衍生出来的商机，众多商家纷纷开始针对手机端页面展开各式各样的营销活动，因此诞生了各种各样的应用产品。商家中最具代表性的有腾讯、百度、阿里巴巴、搜狐、360等。
　　手机端的营销迅速崛起，这让很多设计师们应接不暇，手机端的设计应该怎么做？如何去做好手机端的设计？尚未成熟的手机端设计路线，让众多设计师们很苦恼。作为一个资深的高级网站设计师，本书作者经过多年的美工设计研究，一路走来，亲眼见证了手机端设计从一开始的雏形发展到今天，深有感触，而且经常看到身边的菜鸟同事面对各种页面不知所措，尤其是对手机页面的设计无从下手，把好好的一个页面做成了PPT……于是萌生了编写这本书的念头，以期帮助大家学会手机端设计，提升设计能力，做出更多显得更加“高端、大气、上档次”的设计。
　　手机端的设计，包括手机网站的广告设计、单屏页的设计、微信页面设计等。大家用手机打开淘宝、QQ、京东、微信朋友圈等，都可以大量地看到这类型的手机端设计。手机端设计是一个新的设计方向，它在屏幕、色调、营销角度等方面不同于电脑端。在设计上，手机端的要求会与电脑端的要求有很大不同。
　　在本书中，一开始引导大家对手机端页面有一个基本的了解，对页面有个总体的概念，然后开始着手深入地了解手机页面设计的每个要点。书中从最简单、最规范的知识点开始讲述，包括字体的应用、颜色的搭配、形状的融合、留白的恰到好处、布局的规划、配图的技巧等，再结合一些手机页面设计所必备的小工具应用技法，让每个知识点汇聚在一起，形成一个规范性的基本的手机页面。
　　在完成前面这一部分基础设计学习后，读者已经可以自己独立设计出一个基础页面，但是距离一个“高大上”的设计页面还是有一定距离的，于是，读者需要进行接下来的页面提升学习。
　　在本书中会用很大的幅度来讲述基础页面的提升技法，包括扁平化设计、Banner设计、图文设计、字体设计、点线面技巧等。这些页面提升技法会从一个点、一个大的模块上对设计进行全面的提升，最后再总体地让页面整个设计得到跨越式的提升，从而让手机页面的设计跟上时代的步伐，甚至引领时尚。由于知识跨越度比较大，为便于读者学习，书中还引用了大量国内外优秀案例来进行佐证。
　　通过学习提升部分的内容，读者已经可以设计出一个有模有样的手机页面了，但是在创作上，或许还是会缺乏经验，缺乏灵感。所以在图书的最后，设置了一章内容为作品探讨研究，也便于读者巩固前面所学的知识点，通过一些比较出名、大型的手机网站页面（例如：淘宝、京东、唯品会、途牛、苹果等手机网站专题）来进行探讨研究。此部分有针对性地（特别是营销角度）对页面进行解剖分析，结合前面学到的知识点，吸取网站上的优秀设计经验，揣摩设计页面时的细节，从这些手机页面里搜寻设计灵感，补足自己的缺陷，以便在设计实战中，不仅懂得怎么做一个手机页面，更懂得如何做出极具营销价值的细腻、时尚的手机页面。
　　本书主要由林琼编写，参与编写工作的还有：李媛、潘国允、林阳、林虎、李丽君、梁玉群、李晓欣、谢连娣、龙凤辉、陈玉贤、廖松生、李加爱、吴建茂、吴晓彤。另特别感谢家人和朋友给予的一切支持。
　　在做设计的道路上，学到的知识需要经过很多实践来让作品成熟。本书力求精确地为读者指出一条“明路”，以便大家能少走弯路，吸取众多设计师的精华，从而走上一条光明大道！

《指尖上的艺术：打造触动用户灵魂的移动端设计》 在信息爆炸的时代，手机已不再仅仅是通讯工具，它更是我们连接世界、获取信息、表达自我、享受娱乐的数字生活枢纽。而承载这一切的，正是手机端页面。这些方寸之间的屏幕，承载着信息的传递、功能的实现、情感的连接，甚至品牌的塑造。一个优秀的用户界面，能够瞬间抓住用户的眼球，引导他们顺畅地完成操作，让他们在与产品互动的过程中感受到愉悦和价值，从而留下深刻的印象，甚至产生情感共鸣。 《指尖上的艺术：打造触动用户灵魂的移动端设计》正是这样一本深度探讨如何创造出能够真正打动人心的移动端页面的指南。本书并非枯燥的技术手册，而是一场关于用户体验、视觉美学和情感设计的探索之旅。它旨在帮助读者理解，成功的移动端设计并非仅仅是像素的堆砌和功能的堆叠，而是通过巧妙的构思、精细的打磨，让每一个界面都能与用户的心灵产生对话，引发积极的情感反应，最终建立起牢固的用户粘性。 洞察用户心理，设计有温度的体验 本书的开篇，将带领读者深入洞察用户的心理需求和行为模式。我们不再局限于“用户想要什么功能”，而是深入挖掘“用户为什么想要这些功能”，以及在特定情境下，用户的情绪、动机和潜在期望是什么。理解这些深层需求，是设计出真正触动人心的界面的基石。 用户画像的构建与深化： 我们将探讨如何超越基础的人口统计学信息，构建出更具象、更富有人情味的用户画像。这包括用户的典型场景、痛点、渴望、价值观，甚至是他们的“数字习惯”和“情感触发点”。通过丰富的案例分析，读者将学会如何将这些画像融入到设计决策的每一个环节，确保设计的出发点始终围绕用户展开。 情感化设计的力量： 本书将重点阐述情感化设计在移动端界面中的重要作用。我们将剖析用户在接触不同界面时可能产生的情感，例如惊喜、安心、信任、愉悦、甚至怀旧。通过色彩、字体、排版、动画、微交互等设计元素，如何微妙地引导和塑造用户的情感体验，从而在冰冷的技术产品中注入温暖和人性化的关怀，将是本书探讨的核心之一。 情境化设计的智慧： 用户使用手机的场景千差万别，可能是在嘈杂的通勤路上，可能是在安静的家中，也可能是在专注的工作环境中。本书将强调情境化设计的重要性，指导读者如何根据不同的使用场景，调整界面的信息层级、交互方式和视觉风格，以提供最契合当下用户需求的体验。例如，在紧急情况下，简洁高效的界面能够迅速传递关键信息；而在休闲娱乐场景下，生动有趣的互动则能带来更佳的沉浸感。 视觉的语言，传达无声的情感 界面设计不仅仅是功能的呈现，更是视觉语言的表达。本书将深入浅出地讲解如何运用视觉元素，让界面“说话”，与用户建立起直观而有效的情感连接。 色彩心理学的运用： 色彩是影响用户情绪最直接的因素之一。本书将解析不同色彩所代表的情感含义，以及如何在品牌识别、信息层级区分、引导用户注意力等方面，策略性地运用色彩。我们将通过大量真实案例，展示不同色彩搭配所能唤起的独特情感，以及如何避免使用不当色彩带来的负面影响。 字体选择的艺术： 字体不仅承载着文字信息，更传递着品牌的个性和风格。本书将深入探讨不同字体类型（衬线体、无衬线体、手写体等）所蕴含的情感特质，以及如何在移动端界面中选择最能传达品牌调性、提升阅读体验的字体。我们会讲解字号、行高、字间距等细节对于信息可读性和整体美感的关键作用。 排版布局的魔力： 信息的组织和呈现方式，直接影响着用户的理解效率和感知舒适度。本书将解析经典的排版原则，如平衡、对比、节奏、对齐等，以及如何在移动端有限的空间内，通过巧妙的布局，清晰地呈现信息，引导用户的视线，并营造出和谐统一的视觉感受。我们还将探讨网格系统、留白等要素在提升界面专业度和美感中的重要性。 图像与图标的叙事性： 高质量的图像和富有表现力的图标，能够极大地增强界面的吸引力和信息传达效率。本书将讲解如何选择或设计能够引发共鸣、传递品牌故事的图像，以及如何设计易于理解、视觉风格统一的图标，帮助用户快速识别功能，提升交互效率。 交互的律动，创造流畅的情感流动 移动端页面的交互设计，是连接用户与产品功能的桥梁。本书将引导读者思考，如何让交互不再是生硬的命令执行，而是充满艺术感的“对话”，让用户在每一次点击、滑动、长按中，感受到顺畅、愉悦、甚至惊喜。 微交互的细腻之美： 微交互，那些细微的反馈和动画，是提升用户体验的关键细节。本书将深入分析微交互在引导用户、提供反馈、增强趣味性、甚至传达品牌个性方面的作用。我们将提供大量微交互设计的经典案例，涵盖状态改变提示、加载动画、按钮反馈、表单验证等，帮助读者掌握设计出令人赏心悦目的微交互技巧。 动画的应用与原则： 恰当的动画能够使界面更具活力，帮助用户理解复杂的操作流程，并传递情感。本书将讲解动画在界面设计中的作用，从信息传递、状态反馈到增强情感连接，并强调动画设计的原则，如节奏、流畅度、目的性，以及如何避免过度使用动画带来的干扰。 引导与反馈的艺术： 如何有效地引导用户完成任务，以及在用户执行操作后提供清晰及时的反馈，是用户体验的核心。本书将探讨多种引导方式，如渐进式披露、提示信息、新手引导等，并强调反馈的重要性，从视觉、听觉、触觉等多个维度，让用户始终了解自己的操作状态，建立信任感。 渐进式披露与心流体验： 如何在不一次性呈现过多信息的情况下，逐步引导用户发现和了解产品功能，是提升用户体验的关键。本书将深入探讨渐进式披露的设计策略，帮助读者理解如何在保证信息完整性的同时，降低用户的认知负荷，创造流畅的心流体验。 设计思维的升华，触及用户的情感深处 最终，真正触动人心的设计，源于一种深刻的设计思维。本书将超越具体的设计技巧，引导读者提升自己的设计哲学，从更宏观的层面思考如何创造有意义、有温度的产品。 同理心驱动的设计流程： 我们将强调同理心在设计过程中的核心地位。从用户研究到原型测试，每一个环节都应以用户为中心，设身处地地理解他们的需求和感受，从而做出最贴合用户内心的设计决策。 故事化的界面叙事： 优秀的产品往往能讲述一个引人入胜的故事。本书将探讨如何通过界面设计，将品牌故事、产品价值、用户体验编织成一条流畅的叙事线，让用户在与界面的互动中，感受到产品的魅力和情感的连接。 创造用户惊喜与愉悦： 除了满足用户的基本需求，设计还应该有能力给用户带来意料之外的惊喜和纯粹的愉悦。我们将分享一些能够制造“Wow”时刻的设计策略，从隐藏的彩蛋到个性化的互动，让用户在使用产品时充满探索的乐趣。 可持续的用户情感连接： 触动人心的设计并非一次性的闪光，而是能够与用户建立起长久的情感连接。本书将探讨如何通过持续的用户关怀、个性化的体验和不断优化的设计，让用户对产品产生归属感和忠诚度。 《指尖上的艺术：打造触动用户灵魂的移动端设计》是一本为所有渴望创造卓越移动端体验的设计师、产品经理、开发者，乃至任何对用户体验充满热情的读者而准备的宝贵资源。它将帮助您理解，设计不仅仅是关于功能和美观，更是关于理解人、连接人、并最终触动人心的艺术。翻开这本书，您将踏上一段发现移动端设计无穷可能的旅程，用指尖的力量，创造出真正打动用户灵魂的数字体验。

评分☆☆☆☆☆

从书名《触动人心的手机端页面设计》来看，我就知道这不是一本简单的技术手册。我一直认为，好的设计不仅仅是好看，更是能够与用户产生共鸣，让他们在使用过程中感受到愉悦、舒适，甚至是一种被理解的温暖。我非常好奇这本书会如何去诠释“触动人心”这个概念，并且在移动端这个媒介上进行落地。它是否会深入剖析那些能够引起用户情感共鸣的设计元素，例如色彩心理学在UI设计中的应用，如何利用动效来传递情感，以及如何通过排版和信息架构来提升用户体验的愉悦度？我特别期待书中能够提供一些实用的案例，来展示这些设计理念是如何被成功应用的，并且能够分析其背后的逻辑和原因。是否也会讨论到一些更深层次的设计哲学，比如如何通过设计来传递品牌价值观，并与用户建立长久的情感连接？我希望这本书能够成为我设计路上的一盏明灯，引导我走向更具人文关怀和情感深度的设计之路。

评分☆☆☆☆☆

拿到这本书的时候，我首先被它传递出来的一种温和而有力量的感觉所吸引。如今，手机应用已经渗透到我们生活的方方面面，但很多时候，冰冷的功能和生硬的交互让我们感到疲惫。这本书的名字《触动人心的手机端页面设计》恰好触及了我内心的渴望——希望在虚拟世界里也能感受到一丝温度和人情味。我非常期待书中能够深入剖析那些成功的移动应用是如何在视觉呈现、交互逻辑、甚至是微小的反馈动画中，巧妙地融入情感元素，从而赢得用户的喜爱和忠诚。我希望它能提供一些切实可行的设计原则和方法论，帮助我理解如何去洞察用户的情感需求，并将这些需求转化为具有感染力的设计。比如，书中会不会分享一些关于用户画像的进阶技巧，以及如何根据不同的用户群体来定制化地设计，从而达到“一人千面，皆有所触”的效果？我特别想知道，在信息爆炸的今天，如何通过设计让用户在众多的应用中，感受到一种独一无二的关怀和理解，而不是被淹没在信息洪流中。

评分☆☆☆☆☆

我购买这本书，完全是被它“触动人心”这个词所吸引。我们每天都要花费大量的时间在手机上，但有多少应用真的让我们在内心深处有所触动？很多设计都只是为了实现功能，而忽略了用户的情感体验。我渴望通过这本书，能够学习到如何设计出真正能够走进用户内心，让他们感受到愉悦、舒适、甚至是惊喜的手机界面。我想知道，书中会分享哪些关于用户情感研究的理论，以及如何将这些理论应用到实际的设计中。有没有一些具体的案例分析，能够展现出那些“触动人心”的设计是如何一步步实现的？我尤其关心的是，如何在保证简洁易用的同时，又能够注入足够的情感元素，不至于让设计显得过于花哨或杂乱。这本书是否能引导我思考，如何通过颜色的选择、字体的大小、动效的流畅度，乃至图标的设计，来传递出一种积极、友善、富有同理心的信息，让用户在使用过程中感受到被尊重和被理解？

评分☆☆☆☆☆

这本书的封面设计就给我留下了深刻的印象，简洁而不失专业，色彩的搭配也恰到好处，让人一眼就能感受到它聚焦于“触动人心”这个核心。我本身从事的是用户体验设计方面的工作，虽然接触过不少关于UI/UX的书籍，但很多都偏向于技术层面，而这本书似乎更侧重于情感共鸣和用户心理的洞察。我尤其期待书中能够分享一些如何通过设计细节，比如动效、色彩、文字排版等，来引发用户情感共鸣的案例和方法。在快节奏的移动互联网时代，能够设计出让用户感到温暖、愉悦、甚至产生连接感的界面，是真正能够留住用户的关键。我希望这本书能为我提供一些具体的指导，让我能够跳出单纯的功能堆砌，去思考如何让每一个像素都承载情感，让每一次滑动都充满惊喜。它能否教会我如何用设计语言与用户进行一次深入的对话，而不只是单向的信息传递，这一点让我非常好奇。我尤其关注书中会不会探讨一些跨文化的设计考量，毕竟“触动人心”的标准在不同的文化背景下可能会有所差异，如何在普适性和本地化之间找到平衡，也是一个值得深入研究的课题。

评分☆☆☆☆☆

这本书的书名，像一股清泉，瞬间吸引了我。在这个功能至上的时代，似乎很少有设计能够真正地“触动人心”。我是一名产品经理，长期以来都在思考如何让我们的产品不仅仅是一个工具，更能成为用户生活中的一部分，甚至能够产生情感上的连接。所以我对这本书充满了期待，希望它能为我提供一些关于情感化设计的全新视角和实操方法。我希望书中能够深入探讨用户在不同场景下的情感状态，以及如何通过界面设计来引导和回应这些情感。是否会有关于“情感地图”或者“情绪曲线”之类的概念介绍，帮助我们系统地理解和规划用户的情感体验？我还特别想知道，在移动端这个有限的屏幕空间里，如何用最精炼的设计语言，去传达最丰富的情感信息，这其中的度如何把握？这本书是否能启发我，在看似冰冷的像素背后，去挖掘用户内心深处的需求和渴望，并用设计将之一一实现？