作为产品设计师，就是要多调研，勤思考，最近发现百度首页有个比较有创意的设计，特来分享首页首屏的设计思路。
目录导读：
1、引子-百度首页的设计案例
2、首页首屏的设计约束条件
3、首页首屏的内容组织
4、首页首屏引导下拉技巧
1、引子-百度首页的设计案例
先来看案例，这是百度首页的截图，注意看下方的智能工具部分，首屏（指未下拉之前的屏幕）时，下方用一个扇形样式做漏出，告知当前用户第二屏有如下多个功能。这个创意笔者觉得非常值得借鉴，因为一般情况下，引导下拉第二屏，一般都是仅漏出一个标题和部分内容，无法告知下方还有多个功能。
接上，随着下拉到第二屏的位置，扇形样式消失，变为正常展示具体的智能工具。通过这个案例，我们可以发现，首页首屏的设计学无止境，一些有创意的设计也值得借鉴，借此机会，也来分享一下首页首屏的设计思考。
2、首页首屏的设计约束条件
首页首屏的设计约束条件，首要是电脑/手机屏幕的展示尺寸，这决定首屏能放下多少设计元素/内容，以电脑屏幕为例，通常的展示尺寸有1280x720， 1920×1080等，一般地，我们应以最小的主流尺寸为准来进行设计，即1280x720，以便在小屏上有更好的展示兼容性。
因此，如果是设计一个PC页面，则可以用1280x720的框架来进行打底，确保首屏的内容是不超过1280的宽度，以及不超过720的高度，超出的内容，需要考虑下拉或者横向滚动条展示。
在手机上的尺寸选择同理，一般地，设计软件都会提供常用的手机等移动设备尺寸以便进行设计，在设计之前做好选择即可。
3、首页首屏的内容组织
首页首屏的内容，在组织时，应遵循“F”型动线布局，这是由人的屏幕阅读习惯决定的。眼动研究表明，人在阅读屏幕时，会遵循从左到右、从上往下的习惯，通过眼动仪追踪的热图显示为一个“F”型，这就是“F”型动线布局的科学依据。
因此，在设计首页首屏时，重点内容应放在最左侧和最上面，次要内容再放到其他位置。
4、首页首屏引导下拉技巧
因为首屏的空间有限，通常情况下一屏无法装载所有的设计内容，我们就需要引导用户下拉加载更多内容。通常的技巧是，把第二屏的模块标题和内容漏出一部分，吸引用户下拉查看，回到开头的百度首页例子即是，只是开头的例子更有创意一些，用一个扇形样式表达了下方所有的模块。
还有一种更直白的方式是，提供提示语引导加载更多，不过这种方式不太常见，正常用上面的漏出技巧即可。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
