在目前的市场中，详情页的设计样式可以分为常见的两大类：一是电商类详情页，二是O2O详情页设计。对主流的详情页设计技巧进行梳理，并灵活的应用在我们的设计中，提高我们的设计效率。掌握好以下详情页的设计细节，我们的详情页设计才会更出彩。
1.内容层级
2.图片
3.文字
4.按钮与图标
设计细节点
1.内容层级
对内容进行梳理，确认首屏主要展示内容。详情页的内容是很多的，那么在首屏中展示哪些信息给用户看到是很重要的。比如叮咚买菜的详情主要展示图片、基本信息、优惠券，淘宝详情主要展示图片、基本信息。
△确认首屏主要展示内容
电商类详情页信息排版顺序一般为以下顺序。我们在排布界面的层级顺序时一定要有我们的某种目的，或站在用户的角度去考虑用户关心的信息。
△有目的的进行信息排序
设计技法
▸内容与内容之间使用大留白或线
▸功能模块与功能模块间使用灰色色块
▸首屏分割色块不能超过2个
△京东页面，内容与内容之间用大留白，功能模块间用灰色色块
2.图片
掌握图片的不同比例，在不同情况下灵活使用对应的图片比例。图片尺寸的选取是比较难把控的事情，我们在做设计时可以去参考主流的竞品看看别人是怎么使用的。
△常用图片比例
设计技法
▸图片比例可参考主流竞品。（1:1常用头像、细节展示；9:8常用于卡片列表流；16:9多用于全屏大图、视频类；3:2图片feed信息流）
▸考虑首屏展示内容多少，图片比例设置顺序可以按照1:1>9:8>3:2(图片占据高度依次减小。)
▸图片选取质量要高清、且图片调性需保持一致
3.文字
在详情页中，文字的占据比例是很多的。处理好文字的信息层级是非常重要的。不然会使页面看起来很挤，不透气。另外字体的使用并非一种字体用到底。数字的使用字体可以使用一些特殊字体，让数字更加突出。
文字层级可以通过大小、粗细、颜色来区分。文字的层级要有强有弱。在页面中文字的使用类型常有突出文字、主副文案、标签点缀文字。
设计技法
▸数字字体常用DIN或者阿里新出的字体TG-TYPE与DIN效果差不多。（后台回复字体即可领取）
▸标签高度保持与旁边文字的高度一致，标签内的边距采取1:2，标签文字需加粗
4.按钮与图标
详情页里面主要的按钮有顶部导航按钮与底部吸底按钮。对于顶部有图片呈现的页面，建议用沉浸式导航栏，这样图片能展现更多的内容，节省首屏空间。
△使用沉浸式导航栏
吸底按钮的比例大小与按钮图标的排列顺序是很讲究的。图标的排序需根据重要性来决定。比如淘宝将店铺图标按钮放在第一位，并高亮处理。另外对于比重很重的按钮比例应该占据更大的空间。淘宝与京东的购买与加入购物车按钮，占据的比重大于整个比例的二分之一，那是因为这两个按钮的比例很重要，另外考虑用户单手操作习惯，考虑左手操作用户，让他们更易操作。
△考虑按钮比重
详情页里面的图标除了功能性图标（如店铺、客服、收藏），还有一些装饰性的图标，如标题栏前面的图标，评价里面的五角星。这些小的图标也需要我们去注意设计细节的。比如评价里面的五角星按钮，经验性数字设置半径为39%，比较尖锐凸显品质感。另外48％也是常有的数值看起来会较圆润一些。
△五角星经验性数值
设计技法
▸顶部有图片呈现的页面，建议用沉浸式导航栏
▸按钮与图标的摆放考虑按钮的重要性与比重。
▸五角星的半径设置经验数值为39%凸显品质感，48%凸显圆润可爱的感觉
详情页里面大致分为内容层级、图片、文字、图标与按钮这些设计细节点。在做详情页设计时，我们有意识的去关注这些设计细节点，让我们的界面更加出彩。在平时工作中多多总结主流产品的设计样式规范，并沉淀为自己的设计库，在我们做设计时根据自身产品灵活的去使用我们的素材库，我们的效率就会有很大的提升。而且在快速出方案的时候，这一招真的很好用！！！
往期界面技法拆解
默默努力中，欢迎一起交流，一起成长
网友评论