easy ui 保留页签_设计师必修课：UI设计最重要的几点案例讲解

从人类进化的结果看图像比文字更受大脑的青睐，在没有文字之前，人类靠的都是「看」出来的图像，所以在APP界面设计中图片比文字更容易让人产生点击欲望。图片在APP界面的设计中的应用也非常的广泛，一流设计网带您来看看关于UI设计的干货。

曾经有一个国外的调研结果，吸引人眼球图片内容排序，人脸 >人>动物>物体。在单张图片选择时也可以在满足产品需求的情况下从生理角度考虑对眼球的吸引力

我曾负责千万级访问量APP的图片设计，想把做图片APP时的一些思考分享给大家，方便大家在设计APP图片列表、图文混排、图片流、设计图片相关模块无从下手时，能提供一些思路和灵感。

希望对你能有帮助。

图文混排的方式及场景有哪些？

1. 单图设计

单图全屏

定义：单图全屏也就是整个图片撑满屏幕，一般用于开屏启动页、引导页，登录页面的背景，详情页产品介绍底图等。

优点：单张图片冲击力更强，更容易传递品牌调性，图片处理更加灵活。

缺点：对图片质量要求比较高，比如构图、细节都有一定要求，如果是产品图片背景，以及主要内容集中区域展现会有一定的要求。

可使用拼合效果如滴滴的启动页，或者在图片上方加遮罩和纹理，使图片传递出文艺、高端或者其他任何跟品牌形象相关的感受。第二幅图的图片做了纹理处理，更加有质感。最后一个把整个产品作为一个背景底图，使产品表达更直接，搭配卡片辅助信息或者引导button，能增加用户决策效率。

单图卡片（不下拉）

定义：首屏页面中，以一张图片设计为主要视觉引导，其他会有操作信息以及文字信息。

用途：一般用于突出产品调性，比如交友软件的卡片页面，分享的落地页，以及一些专题的入口等，图片作为一个产品的载体及跟用户交流的入口，能第一眼把用户的眼睛聚焦在图片上，从而达到查看其它信息或引导进行其它交互操作的目的。

单图+辅助信息（可下拉）

定义：首屏出现一个宽度撑满，高度自适应的产品图片或者商品图片。

用途：某一些产品大图页，或者详情页的头图，提升产品氛围，引出产品形态以及详细内容。

需要注意：

因图片高度一般不固定，需要设置一个最高高度度，比如屏幕高度的75%，wap页面要考虑浏览器底部操作高度，如超过区域或进行裁切，或是同比例缩放放一个底色上，一般采用黑色

高度不宜过高，最好能露出部分辅助信息，新设计页面时会做适当引导，比如：提示用户可上拉的箭头或者小手。

2. 图文列表

左图右文-较常见图文列表组合

根据F形浏览引导线，更重要的图片信息放在前面，左图右文模式更强调用图吸引用户浏览视线。

应用场景：搜索结果或推荐list，如房产APP搜索结果 list、购物类搜索结果、播放列表、游记类型结果页。

右图左文-较常见图文列表组合

资讯类型、新闻类APP，更强调文字标题信息，往往图片跟标题的对应性没那么高，有一些是用户自己上传，有很多不可控因素。

应用场景：信息流feed，经常搭配三图模式、纯文字模式一起出现，如今日头条、房产APP、新闻类推荐结果、天气卡片等。