导图社区 设计相关基础知识框架学习笔记
- 94
- 0
- 0
- 举报
设计相关基础知识框架学习笔记
如果两个项不完全相同 ，就应当使之不同，而且应当是截然不同、在页面上增加对比能吸引人的眼球、通过字体选择、线宽、颜色、形状、大小、空间等因素增加对比，对比一定要强烈。
编辑于2022-11-01 16:36:54 广东- 设计基础
- 相似推荐
- 大纲
设计相关基础知识框架学习笔记
设计的原则 C.R.A.P
1、对比-contrast：突出重点
what
如果两个项不完全相同 ，就应当使之不同， 而且应当是截然不同
why
在页面上增加对比能吸引人的眼球
增加页面效果
有助于信息的组织
how
通过字体选择、线宽、颜色、形状、大小、空间等因素增加对比，对比一定要强烈
2、重复-repetition：一致性
what
设计的某些方面需要在整个作品中重复
why
重复的目的是统一，并增强视觉效果
how
小标题
others
避免太多地重复一个元素
3、对齐-alignment：整洁舒服
what
任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系
why
使页面统一且有条理
how
特别注意元素安放的位置
others
页面上只使用一种文本对齐
找一条明确的对齐线，并用它来对齐
在打破规则之前必须清楚规则是什么
尽量避免居中对齐除非是有意识地创建一种比较正式、稳重的表示
4、亲密-proximity：加速理解
what
将相关的项组织到一起，使他们的物理位置相互靠近
why
如果多个项相互之间存在很近的亲密性，他们将成为一个视觉单元
物理位置的接近意味着存在关联
根本目的是实现组织性
信息有条理，容易阅读和被记住
空白更美观
how
眯起眼睛，统计你的眼睛停顿的次数来数一数页面上有多少个元素
others
颜色运用
色轮
三原色
红
黄
蓝
三间色
绿
紫
橙
颜色关系
互补
色轮上相对的颜色（180°对角）
最佳搭配：一种作为主色，另一种用于强调
三色组
彼此等距的三种颜色通常形成一个三色组
基色三色组
红黄蓝
适合儿童产品
间色三色组
绿紫橙
分裂互补 三色组
从色轮的一边选择一种颜色
再在色轮上找到对面的互补色
使用这个互补色两侧的颜色
类似色
色轮上彼此相邻的颜色组成
暗色和 亮色
色调
纯色就是色调
向色调增加黑色就构成一个暗色
向色调增加白色就构成一个亮色
单色组合
由一种色调及其相应的多种亮色和暗色组成
色质
某种颜色的特定明暗度、深浅度或色调
色质不能过于接近
暖色 与冷色
暖色包含红色或黄色，冷色包含蓝色
暖色前进型的，冷色是后退型的
暖色很容易吸引眼球，所以可以使用更多的 冷色才能产生效果，形成有效的对比
RGB与 CMYK
CMYK
Cyan：青色
Magenta：（品）洋红色
Yellow：黄色
Key:黑色
用于印刷的颜色模式
RGB
Red：红色
green：绿色
blue：蓝色
显示屏上看到的颜色模式
字体设计
字体 （与人生）
协调
只使用一种字体，页面上所以元素都采用同样性质的字体
协调的设计往往是平静和正式的
冲突
在同一个页面上设置了两个或多个类似的字体，它们并非完全不同，也不完全相同
相似性是互相冲突的，协调是一个稳妥有用的概念，但冲突务必要避免
对比
在设计中增加对比，最有效、最简单而且最让人满意的方法之一就是利用字体
字体类别
西方国家字母体系分为两类:
衬线字体
serif是有衬线字体
意思是在字的笔画开始、结束的地方有额外的装饰， 而且笔画的粗细会有所不同。
无衬线字体
sans serif就没有这些额外的装饰，而且笔画的粗细差不多。
现代
现代风格字体多为无衬线字体
这类字体除本身文字的比划之外缺少装饰性的元素，风格较简约。
主要用途：
UI界面设计
如苹果网站上 iPhone 的字体
复古
多为衬线字体
字母的转角处线条柔和，更具流线形
科幻
科幻风格的字体风格普遍比较硬朗和锐利，通常有过渡比较直接的折角。
电影星际迷航的海报上的字体就属于这种类型
梦幻
粗细不一的比划和大小不同的字母具有非常强烈的节奏韵律感，字母划出的曲线像翩翩起舞的丝带，也像魔棒划出留下的痕迹，使人充满想象。
迪士尼的字体就属于这种风格
女性
通常字体纤细、秀美，线条流畅，字形有粗细等细节变化，显得有韵律或通过装饰性元素和字体结合
多为衬线字体
趣味
可以使用产品中的某些元素和文字进行创意性的结合
文化
字体设计使用了毛笔书法的笔触书写的方式
UI设计理论
1、7±2法则
1、人们短期记忆，每次能处理5~9件事情
2、（网页设计）导航菜单的元素控制在7个以内
2、2秒钟法则
1、用户使用某类系统时，等待反应 （例如：功能切换和功能载入）的时间不能超过2秒钟
2、用户等待的时间越短，用户体验越佳
3、3次点击原则
1、用户3次点击之内，如果没有找到想要的信息 或了解网站的特色，就会离开网站
2、突出越清晰的导航，符合逻辑的结构和易于理解的网站层级的重要性
3、如果不能在3次之内让用户找到想要的信息，就应该让他知道 他在哪，从哪来，要到哪里去，并且能够让他了解如何完成目标
4、2/8原则（Paretod定律）
1、paretod定律（也称为“少数关键定律”或“因素稀疏定律”）表明， 80%的结果由20%的原因产生
2、对20%的用户、客户、活动、产品或过程定位，可能 为你带来80%的利润，使你对它们的注意程度最大化
5、界面设计的8个黄金法则
1、努力做到连贯
2、允许频繁使用系统的用户使用快捷方式
3、提供信息反馈
4、为关闭这一动作设计对话框
5、提供简单的设计处理
6、允许简单的撤销操作
7、提供控制器，支持内部控制点
8、降低短期记忆负荷
6、设计简单
1、减少：达到简单的最简单的方法，就是用心割舍
2、组织：妥善组织能使复杂的系统显得比较简单
3、时间：节省时间会让人感觉简单
4、学习：知识使一切变得更简单
5、差异：简单和复杂相辅相成
6、背景：简单的周边事物绝非无关紧要
7、感情：感情越多越好
8、信任：我们相信简单
9、失败：有些事物不能简单
10、简单是减少明显的，增加有意义的
7、字体设计的法则
1、统一文字方向控制面板整体倾向
2、统一文字斜度，使版面更具动感
3、统一文字笔画粗细，增强版面平衡感
4、统一文字整体风格，表现版面独创性
5、统一文字空间，保持版面形态美
6、统一字体色调，强调版面第一印象
APP导航模式
常见的8种APP导航模式
APP标签导航
位于页面底部
通常包含5个标签导航
适用于用户频繁在不同分页切换的情况
缺点：占用一定高度的空间
舵式导航
标签导航的变体
中间为“舵”，两边为操作按钮
适用于：处于同一级的几大部分内容， 同时又需要一个非常重要且频繁操作的入口
抽屉式导航
将菜单隐藏在当前页面，点击入口即可 像拉抽屉一样拉出菜单
优点：节省页面展示空间，让用户的 更多注意力聚焦到当前的页面
适用：不那么频繁切换内容的应用 例如：设置、关于等内容的隐藏
宫格导航
将主要入口都聚合在页面，让用户做出选择
缺点：用户有选择压力，这种应用越来越少
一般用于二级页面作为内容列表
混合组合导航
上分是宫格形式展现的快捷入口
宫格之间不需要是平等的关系， 可视为图形化的文字链接
比较灵活，能适应架构的快速调整
列表式导航
一般用于二级页面，与宫格导航一样，不展示实质内容
优点：结构清晰，易于理解，冷静高效， 能够帮助用户快速定位去到对应的页面。 可以通过间距、标题等进行分组
tab导航
用于二级页面，本质和标签导航一样， 用于层级比较多的情况下。典型场景是 用于改变当前的视图，或对当前内容 进行分类查看
大图轮播导航
应用信息足够扁平时，可尝试使用轮播导航
优点：应用页面简洁，操作方便
缺点：不能快速定位对应的分页内容
3种常见移动APP 页面加载方案优缺点
1、单页面加载方案
分类：
整体加载设计方案
优点：
比较简单
运用在页面内容比较单一的情况
一次性加载完所有数据后再显示内容
页面加载失败的状态比较好处理
直接不显示信息或提示加载失败
缺点：
加载方式比较传统和简单
对复杂的APP界面数据应用不合理，有一定的局限性
例如：网易新闻
分块加载方案设计
优点：
能让用户逐步看到内容，降低用户等待的焦虑心理，提高用户使用率
有关联性的，先加载父内容，再加载子内容
缺点：
影响APP界面设计的美观度，在网速不佳的情况下，容易出现加载失败等
例如：优酷
2、跨页面加载方案
优点：
在父页面和子页面或统一APP内，页面间字段可以复用的，在加载子页面不需要重新加载数据
切换起来很流畅
多个页面直接跳转，是由1个页面先加载完成的
例如：微信、支付宝的个人信息
3、预加载方案
优点：
在加载一个页面时，预测用户的下一个行为，并为他下一步 需要使用的页面加载内容， 使得他在下一个操作中能立刻获取信息而不需要加载等待
最常见的就是：瀑布流的布局加载
缺点：
后台加载，需要考虑用户在未加载完就使用到那些信息的情况
需要根据具体的场景来进行设计，设定好信息的优先级， 综合考虑考虑各种类型信息的具体大小流量，整体考虑加载的方式
视觉规范
iPhone5s
高度
1、顶部状态栏
40px
2、导航栏
88px
128px，1px分隔线，共129px
3、列表内小图标尺寸
58×58px
圆角为12px
4、板块之间的间隔为70px
（如果状态栏+导航栏有1px分隔线的话为69px）
5、列表高度为86px
字体
iPhone的系统字体，在设计稿中最接近中文字体为黑体-简， 英文写作Heiti SC。英文字体为helvetica Regular
导航字体
中体
样式：浑厚 34px
列表类字体
细体
样式：浑厚 34px
边距
1、上下边距不限制
2、左右距离手机屏幕边缘各30px
3、列表内图标上下左右间距30px
1、以iPhone5通知页面为例
1、板块说明文字 26px 细体 浑厚 与板块边距18px
2、列表类标对一级说明 24px 细体 浑厚 与一级文字距离8px
3、列表高度（含1px分隔线）100px
2、以 iPhone5 的 APP Store 更新页面为例
1、导航上，返回/更新的字体：33px 细体 浑厚；箭头与屏幕边距为16px
2、控件一级菜单栏内tab切换：580×58px（包含2px描边） tab里面的字体：细体 浑厚 24px
3、搜索框：608×56px，圆角12px；搜索框内字体：细体 浑厚 28px
4、更新列表内图标：128×128px，圆角30px
5、列表高度（不包括向下1px分隔线）：168px,图标距离列表20px
6、列表内文字：细体 浑厚 28px；说明性文字：细体 浑厚 24px
7、列表内部按钮大小92×52px（包含2px描边），字体：细体 浑厚 28px
8、tabbar下班菜单：高度98p（含1px顶部分隔线）；字体：细体 浑厚 20px
9、更新通知红点大小：36×36px，红点内数字 helvetica regular 24px
屏幕像素 尺寸与 物理尺寸
dip是Device Independent Pixels（设备独立像素）
dip或dp是一样的，是关于像素密度的单位
像素密度=像素分辨率/物理尺寸
px=dp*（dpi/160） 160为第一台设备诞生时的参数
1英寸160点的屏幕上，1dp=1px
iPhone4以上的设备
320dpi
1英寸320点的屏幕上，1dp=2px
独立存在的控件尺寸，必须是偶数
移动端没有hover效果，所以按钮要充分考虑多状态
子主题 5
商品详情页设计
如何设计一个爆款详情页
1、找爆款，在淘宝、天猫等 网站上看销量靠前的作为参考
2、筛选出市场定位相同或相近 的、靠前的3-5个产品
3、提炼相似之处：
1、学文案
2、想色彩
色彩给人暗示
3、看布局
1、关联销售
作用：分流，与关联产品搭配，进行捆绑销售或引导消费者购买，促进转化率。
关联不能做得过长太多。做成具有视觉审美效果的海报形式
图片不能保存得太大、太长，以免影响加载、浏览速度。
底部关联必须用心 ，提高转化率
2、产品海报
作用：展示产品特色（高端、大气、上档次），吸引消费者注意
3、产品优势（特点）展示
人无我有，人有我优
4、产品参数
将产品参数（规格、尺寸、性能等）尽量详细描述
5、产品细节展示
6、产品美化
通过对比（同类产品对比、使用前后对比）、性价比等美化产品形象
7、配件物流/售后服务
快递事项、售后事项
8、企业硬实力
企业宣传资料/照片
4、风格必须统一
5、参数、文案不能出现错别字
从消费者心理出发
1、消费者有疑问？ （产品外观质量？）
传递高大上的品质 （用优秀的海报展示）
买家第一印象
2、消费者有疑虑？ （别人也有你这样的！）
表达出我们的优点 （详细美观的优势介绍）
引导买家加深印象
3、消费者有问号？ （你的产品参数尺寸？）
你要什么我都给你 （需要到详细到极致的参数表）
引导买家了解我们
4、消费者想知道 （产品细节图怎么用？）
信息广泛的介绍 （从上到下、从里到外的介绍）
引导买家接纳我们
5、消费者有问号 （别人的产品跟你的类似）
我们比他们好得多 （产品美化性价比、物理实力）
引导买家留在这里
6、消费者有疑虑？ （如果你们只是吹牛）
企业硬实力的介绍 （强大而强势的企业硬实力）
立即购买
2个基本点+6个原则
2个基本点
1、寻找你产品的价值点而非促销点
2、把你所有的顾客当成非专业人士
6个原则
3秒钟原则
3秒内必须引起注意力
前3屏原则
前3屏决定买家是否想购买商品
讲故事原则
情感营销引起买家的共鸣
一句话原则
用一句话提炼出产品的卖点
重复性原则
商品卖点只需要一个且要不停的告诉客户
FAB原则
诉求利益因素，给她一个购买的理由
商品详情页设计
1、商品展示图不宜过大，鼠标悬停展示细节
2、满足用户的比价心理
3、增加分享按钮
4、用户行为引导 吸引客户点击
色彩
文案
提高转化率
影响转化率的因素
用户人群
价格
物美价廉、性价比高
款式
销量
评价
店铺信誉
影响消费者思维
如果没有你的产品 用户的生活会有什么样的痛苦？或者要付出什么样的代价？
提高转化率策略
突出产品的独特卖点
卖点必须和客户想要的要相符
独特卖点要简明扼要
产品与服务的卖点要唯一
制造产品稀缺性和紧迫感
当你的主打产品无法做到稀缺性和紧迫感的时候， 你可以把赠品制造稀缺性和紧迫感
0风险承诺
言行一致，让用户体验结果
评价优化
没有评价的产品，无法取得信任
提供不一样的服务
把售后、客服当成事业来做，创新
如何写出引爆眼球的营销文案
文案写作思路
1.九宮格思考法：
中间为商品名称，周围填充商品的众多优点
2.型录要点衍伸法：
1、抄录商品的特点
2、对商品的特点进行延伸
3.三段式写作法：
仿新闻学中「倒三角写作法」
第一段，精要地浓缩全文的销售话术
第二段，依照型录要点衍伸法，逐一说明该商品的众多特色
第三段，强化商品USP(Unique Selling Point，独特销售卖点)、价格优势或赠品
4.写网购商品文案时注重SEO友好性：
文章中出现商品名称要完整(包含品牌/中文/英文/正确型号)，方便Google、ETAO等搜索引擎蜘蛛读取，且完整商品名的出现频率可以至少2-3次。
5.好的商品文案需要搭配出色图片：
再动人的文案不如一张有说服力的照片
图片底下可斟酌加上一小排图片说明小字
用小标题提纲挈领，阅读效果更佳
6.用文案诱导消费者照「你的建议」购买：
把顾客「洗」向高利润与他最想要销售的商品，而非你想要买的商品
操控消费者的心智：要他加购配件、买某种颜色、买更高等级的规格、接受你的预购项目等
7、最犀利的商品文案是说出有利的事实；
商品曾得什么奖？源自哪个知名品牌？是目前哪个通路的销售冠军？是哪个网站网友口碑最佳的商品？哪个当红名人代言这个商品？或凸显这个商品的绝对价格优势(例全国最低价)
8.好的文案可以防御竞争对手的攻击：
竞争对手的攻击包括耳语攻击、文案攻击以及价格攻击。 如果你觉得已经影响你的销售力道而必需有所动作，那请在文案里四两拨千金的还击，有技巧地化解对方的攻势，不必指名道姓正面冲突。 比如某知名竞争对手说他的精品包价格比你的卖价便宜许多，那你可以强调你的商品的货源纯正、质量优异、服务口碑良好，并在文案指出「目前网络上有店家推出价格低于行情却来路可疑的同款商品，已有消费者吃亏上当了，提醒您千万要注意。」这样可以反将他一军，轻松化解你的价高窘境。
9.谨慎地写每一篇文案：
写网购商品文案等同建一个销售页面数据库，等同录一段推销该商品的影片
10.商品文案可以随季节及销售数字修改：
在商品销售之前、全新上市时、商品热销时、商品销量衰退时、商品清仓时的文案都可以不同。
帮消费者找出「为何要在此时机购买的好理由」
写文案的一些小技巧
A.求关注：文字见心机
文字配图都以商品的直接受众为点，进行受众分析，最终形成一个由点到面再到立体的文案策划思路
B.产品说明文案：
用数据说话，准确
延伸说明产品某些特性具备的优势、亮点
C.求个性：描述见需求
要把宝贝描述的生动有力，就要文案深入了解宝贝
让买家看到宝贝每个细节的质量保证
宝贝的设计元素、颜色、宝贝穿着场景等都影响着买家对宝贝的满意程度和转化率。
体现出目标群体需求的宝贝细节可以让你的宝贝更具说服力，满足购买者的要求。
以产品为主导并始终把买家体验放在第一位。
D、求创意：元素符号见风格
店铺的招牌，全店设计、宝贝图片甚至模特都能体现店铺形象
编辑文案会出现的问题
1、宝贝描述内页的文案逻辑性问题
2、以产品为中心的问题
4C，指顾客、成本、便利性、沟通;
4P，指产品、价格、促销、渠道。
以消费者为中心，满足客户某方面的需求
3、只讲商品好处的文案
在讲商品的好处时，也应该把一些不适合的人群，不适合的地方都介绍出来，或者这商品能帮客户具体解决什么样的问题，解决他们什么样的痛苦。
4、网店文案不懂营销和促销
5、文案不懂商业基本合约的问题
一个商品的内页文案，就像是一个产品说明书，要让内页说话，消费者看完这个内页后，就了解所有相关问题，如运输选哪几家快递公司、邮费是多少、退换货问题、售后服务问题等等。这些最基本的信息都应该很好，很清晰的列出，以免带来不必要的问题。
6、文案不懂淘宝规则的问题
如何零基础撰写洗脑型的文案
1、故作矛盾：如不用节食，还你苗条身材。 2、帮客户完成目标：30天打造流利英语。 3、提取活动亮点或礼品亮点：满XX元，从帆布包。 4、“画饼”效果：还你婴儿瓷肌。 5、震惊描述：万万没想到！还能这么低！ 6、强调后果：30天学会流利英语，否则全款退还。 7、挑战书：你的头发还能坚持几个月。 8、给一个解决方案：没空去韩国？就来韩都衣舍。 9、给“患者”一个好消息：“土肥圆”也有春天。 10、强调并兑换价值：价值3999元的情侣摄影套餐，现限量999元供应。 11、用户最关心的，独家的特色好处：别人卖放心，我卖舒心。 12、节省时间：不必东奔西走，这里应有尽有；快速掌握日赚1000的秘密。 13、好奇心的妙用：史玉柱营销心得，6个不为人知的秘密。 14、附带证据佐证：326451名MM的喜爱证明，您的选择很有眼光。 15、场景联想的描述：XX车险 归乡途中的“安心”。 16、对比：原价10块，现2元处理。 17、结合相关时事：《何以笙箫默》同款衬衣。
电商/微商APP设计
设计比例
1:1:1
1:2:2
设计形式
卡片式
对比
同一颜色背景
纯色
偏弱的暖色调
京东装修
设计规范
LOGO
尺寸：180×60px
格式：JPG、PNG、gif
首页
banner
尺寸：990×250px
格式：JPG、PNG、gif
宣传banner
不允许出现其他网址的链接或提示
不允许出现商家的客服联系方式及实体店等
店招
950×150px
轮播banner
950（固定宽）×550（以内）px
店铺分类栏
宽：≤180px
左侧促销
宽：≤210px
店铺收藏（分享）
优惠券发放
右侧促销
宽：≤730px
活动预告
主推产品宣传图
轮播图片
优惠券
品牌简介
尺寸
宽：740px，高：不限
格式
JPG
大小
1M以内
内容
介绍公司
主图
规格
800×800px
72ppi
JPG
300K以内
首图
背景：白底（家纺、服装分类除外， 详见行业标准）
商品区域：780×780px
参考线：10px、790px
辅图
背景：无要求
包括：正面、背面、侧面、细节
详情页
规格
宽：990px
高：不限
大小：1M以内
内容
不能出现市场价
不能出现淘宝用语
亲、包邮、正品、原价、市场价……
团购
普通团
入口图
440×293px
50k以内
主图
800×800px
300k以内
品牌预定团
入口图
440×293px
50k以内
入口图2
990×200px
60k以内
主图
800×800px
300k以内
首页装修
店招导航
方法一：背景实现
优势：简单稳定
劣势：超出990部分无法添加链接
操作：①点击布局设置 ②设置区域背景实现全屏
方法二：通过全屏代码
优势：局限少，990px外也可加链接
劣势：不稳定
全屏代码：
<div style="height:180px;"> <div style="margin-left:-960px;width:1920px;left:50%;position:absolute;"> 内容 </div> </div>
高度：自定义
方法三：不使用公共头部，直接在页面中做
优势：直接在通栏百分百布局下添加自定义模块，简单方便
劣势：商品列表、搜索结果等页面都需要单独制作
搜索框特效代码
搜索 牛到哭的镇店之宝就这么D的商品推荐就这么D的商品推荐就这么D的商品推荐就这么D的商品推荐
蓝色清爽下拉带图片轮播导航代码
查看所有商品 促销专区 新品速递 超值热卖 秋冬必备 特价专区 包邮专区 漆面养护 洗车去污 车蜡系列 划痕修复 封釉镀膜 清洁护理 车体清洁 内饰清洁 内饰保养 系统养护 玻璃清洁 轮胎轮毂养护 内饰精品 超值套装 头枕颈枕 抱枕 空调被 腰垫靠垫 车内小套饰 座垫 脚垫 方向盘套 车内挂件 实用配饰 汽车香氛 竹炭去味 车内吊香 仪表台香水 香水补充液 超值专区 毛巾 海绵 手套 蜡扫 其他工具 最新促销活动    首页有惊喜 镇店之宝 雨刷专区 降温大促 新车必备 反季亏本清仓 新品抢先 品牌故事
收藏夹代码及连接
方法一：
使用代码（懂代码的推荐使用）修改文字，可改成图片
<div class="j-module" module-function="addFavorite" module-param="{title:'京东商城', url:'http://www.jd.com'}" style="cursor: pointer;"> <div> <span>加入收藏</span> </div> </div>
方法二：
链接修改链接和文字
javascript:window.external.AddFavorite('http://www.jd.com/','京东')
关注店铺代码及关注链接
方法一：
写代码（会代码的推荐使用）
<div class="j-module s_attention" module-function="follow" module-param="{type:'shopId',id:'自己的店铺ID',node:'.item'}" style="cursor: pointer;"> <span class="item">关注我</span> </div>
方法二：
直接加链接，适合代码菜鸟
代码如下：javascript:S_ifollow.follow('shopId', shopId, 'shop-attention'); 直接在链接里添加以上代码即可
京东客服代码生成
http://www.jy47.com/tool/jd/201508/00000117.html
自定义样式命名
必须以.user为前缀
如：.user-banner{}
全屏代码
全屏轮播图代码
  
关联版式做成990px
方法一：
不切图加热点。（推荐使用）此方法也可用于990px的详情页的制作
1、将效果图上传到商品管理下面的图片空间
商品管理→ 图片管理
2、复制该图片的代码；
3、进入dw编辑热点，如果图片只是单个链接或没有连接，此步骤可省略
33333.jpg
4、复制以上代码到关联版式，注意切换到代码模式下再粘贴
4444.jpg
5、保存，去商品管理设置管理板式即可！
方法二：
PS中切图
990左侧菜单左右滑动轮播特效代码
     建缘设计 建缘设计 建缘设计 建缘设计 建缘设计
       推荐 7月18日  JUST US项链时尚饰品小时代系列吊坠项坠925纯银Tiny Time 女款项链 ￥299.00 建缘设计，倾力奉献  JUST US纯银吊坠商场新款简洁时尚饰品项链水滴皇冠项坠 光之要义 吊坠+41cm十字银链 ￥328.00 建缘设计，倾力奉献  JUST US纯银吊坠商场新款简洁时尚饰品项链水滴皇冠项坠 光之要义 单坠 ￥229.00 建缘设计，倾力奉献  JUST US情侣对戒专柜新款磨砂镶钻男女戒指拼接指环 露西亚的猫咪 女戒11号 ￥329.00 建缘设计，倾力奉献  JUST US情侣对戒专柜新款磨砂镶钻男女戒指拼接指环 露西亚的猫咪 女戒13号 ￥329.00 建缘设计，倾力奉献     
详情页设计
详情页到底是干嘛用的？
电商跟实体店铺体验的区别，导致我们的商品是没法直观看，没法直接上手摸，感受手感，感受材质，没有导购吹嘘、引导和即买即走的。
详情页就是要替代实体店铺购买体验中的这部分功能
详情页的目的是什么？
吸引消费者下单购买，而要完成这个使命，就需要展示我们的优点优势，打消消费者的顾虑，让消费者体验刷卡的快感！
消费者看详情页实际想看的是什么？
消费者想看的是我搜索打开的东西是不是我想要的，是不是足够好到我要付款拿下，型号、规格是什么样，有没有打到我的买点，跟别家商品对比有什么优势，店铺是不是靠谱，售后如何。
店铺内其他商品的关联推荐和活动等
但要精简，原则上不超过1屏。
有创意有逼格的海报情景大图
抓住消费者的注意力，展示品牌或商品的调性，给消费者美好的第一印象，也给整个商品详情页定基调。
商品的卖点、特点、优势展示
拿出正儿八经的好东西来，别只展示商品图了。这一部分展示完，基本就决定消费者对你的商品感不感兴趣。
卖点要挖掘，你是主打实惠、性价比还是高品质服务，不同的定位，展示的方法不一样。
商品的细节图展示
看了整体和参数之后就该看细节了，细节决定成败。这里实现的实际是线下购买商品时，检查商品的细节，看看衣服的走线、瑕疵什么的。
细节展示的时候导购是不是该说一说跟别人家商品的优势啊，这就是详情页里跟同行的对比图了，再次坚定消费者购买的决心。
包装、物流、售后优势的展示
如果是大品牌也可以再加一个品牌宣传，证书、资质啊什么的。最后让消费者放心购买，去享受刷卡的快感！
字体的性格
一、什么是字体性格
字如其人
字形结构
笔画
细节特征
三者构成字体
结构的松散与疏密
骨骼
笔画的粗细与曲直
肉
细节的特征修饰统统
衣服
影响“字体性格”
二、字体性格表现及划分
1、字形结构
扁平VS瘦高
扁平
沉稳
庄重
紧凑
速度
瘦高
女性
优雅
文艺
轻盈
松散VS紧凑
松散
透气
空灵
自由
松弛
紧凑
节奏
严肃
紧张
快速
2、笔画
粗VS细
细
科技
轻盈
品质
透气
粗
醒目
信赖
分量
正式
曲VS直
曲
三、字体性格的运用