在设计过程中，在新设计一个页面时，会遇到一个基本的问题，我的页面背景应该是底色？页面的要素怎么组合展现才能达到更好的展现美观度，贴合业务需要，实现更高的转化率？
基于上面的问题，梳理了几种较好的常见的页面设计样式。
白底条目式
样式示例
样式要点
• 背景：整体以白色为底。
• 要素：以条目化黑字内容为主。每个条目中一般不同信息的文字颜色以黑灰两色区别，让用户快速解读页面，获取焦点。
• 分割：每个条目之间最好不用分割。整个页面中需要少量的灰色要素做分割。比如筛选的灰色按钮，比如灰色的分割线。以便于对整体页面进行解读。
优缺点
优点
整体页面明亮，有活力，更有品质。
展示信息内容多。缺点
暂无
适用场景
• 适用于信息较多的列表页，比如消息列表、通讯录人员列表等。
• 适用于详情页等其他大部分页面。
灰底条目式
样式示例
样式要点
• 背景：以灰色作为背景。
• 要素 ：背景之上主要呈现白底黑字条目化的信息内容。注意条目一般要进行分组展现，避免每条条目直接都有较大的分割，否则整体不协调。
• 分割：
• 条目组之间用灰色背景自然隔离，注意宽度要较宽一些。有些情况在灰色背景上可以展示分组的标题。
• 组内的条目之间用灰色线进行分割，宽度一般为1。
优缺点
优点
展示的信息多，实用。
缺点
样式不如卡片精美，如果信息不多覆盖不了整个页面时，会流出一大块整片区域的灰色，视觉上并不好看。
适用场景
• 适用于信息需要编辑的页面
• 如果APP整体都是条目化的样式，一般为了保持一致性，可以在模块的首页、列表页面等情况下使用。其他大多数场景不推荐使用。
灰底卡片式
应用最为常见最频繁的一种样式。
样式示例
具体样式
• 背景：页面整体以灰色作为背景
• 要素：在此之上以呈现白底黑字的卡片内容为主，卡片可加阴影也可以不加。
• 分割：灰色背景即为分割。
优缺点
优点
减少了线条或者边框的使用，展示美观。
缺点
边框本身因为要缩进，即宽度小于页面整体宽度，不适于呈现内容多的页面，尤其是有较多信息要编辑的页面。也不适合呈现项目太多的页面，比如通讯录列表、信息列表。
适用场景
• 模块首页的应用入口，比如我的，工作台首页都比较常见。
• 信息列表的展示页，比如详情页分组（即分卡片）展示信息要素。
• 简要信息的编辑页，比如详情编辑页中，要编辑的内容较少时可以使用。
白底卡片式
样式示例
样式要点
• 背景：整体以白色作为背景
• 要素：背景之上主要呈现白底黑字的卡片内容。重点细节在于白底黑字的卡片加上阴影或者加上灰色边框，这样就与白色背景实现使视觉上的分割。
• 其他：当页面只有卡片的文字内容时，可以在上部增加一个banner等以其他图片要素，使整体页面更加丰满。
优缺点
优点
白色背景还是好看，也简洁。
缺点
还没想到~~
适用场景
• 一些列表应用的入口页面。
• 一些应用消息的列表页面。
样式总结
四种样式中，个人更倾向于白色背景，即白底条目式和白底卡片式，另外灰底卡片式是一般情况下的也是不错的选择。
| 样式 | 要点 | 优缺点 | 推荐指数 |
| 白底条目式 | 白色背景；白底黑字条目内容；少量灰色要素分割 | 明亮活力视觉效果好；呈现内容多 | 5星 |
| 灰底条目式 | 灰色背景；白底黑字条目；条目分组，分组间灰色大间隔，条目间灰色线条小间隔 | 整体视觉一般，对于页面条目少的情况，留出大片灰色区域不好看。 | 2星 |
| 灰底卡片式 | 灰色背景；白底黑字卡片；灰色背景自动分割；上部可以有banner图优化页面呈现。 | 卡片视觉效果好，页面内容展示饱满；页面上项目加多较咋时，卡片也能节省空间，比如我的，工作台等等。 | 3星 |
| 白底卡片式 | 白色背景；白底黑字卡片，加阴影或加灰色边框；上部可以有banner图优化页面呈现。 | 效果也不错~~ | 4星 |
几点核心
细节1 ：顶部一定要注意与页面保持色调一致，这是检验一个产品设计用心程度的细节标准。
细节2：一般使用灰色线条或者灰色按钮作为各类要素的分割。
趋势：一体化，简洁化。
原则1：凸显内容要素，最基本原则就是白底黑字。不管白色背景或者浅灰色背景，每条信息其实都是白底黑字。
原则2：简洁页面呈现，整体界面尽量少的分割线，框线。分割线框线少了，就能减少用户对所见页面的认知处理，整体看起来更简洁。
原则3：简化颜色搭配，颜色尽量不要超过三个，最好的方式就是统一UI规范。白色、黑色、灰色之后，最多不超过三个彩色颜色。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
