我们常常从客户或者来参加我们培训的人那儿听到这样一个问题，“在移动端的列表设计中，是加图片缩略图好呢，还是不加好呢？那如果加的话，是放在文字的左边好呢，还是右边好啊？”不用我说，这可不是个一刀切就回答得了的问题，但是如何在不同情况下找到最好的解决办法可是有据可循的。图片是否有用？你可别因为列表项有图可配，就觉得理所应当要展示出图片。首先想一想图片是否对指引用户选择列表中的条目有帮助。更好的检验方法是问问自己如果只通过图片你是否能够找到自己想要的东西。如果答案是否的话（也许是因为图片过小以至于看不清细节或是因为这些只是再普通不过的通用图片），那么请果断放弃吧。举个栗子，下图Teavana移动端网页的设计中，列表中的缩略图似乎并不能帮助用户选择茶叶，因为在如此小的一张图中，用户根本无法看清茶叶的细节以及其他材料的情况。被图片占用的这部分空间，如果用作展示一些独特的信息会更好，例如描述一下该品种茶叶的口味或者咖啡因含量——这样的内容是能够帮助到用户去做出选择的，然后现在却被深埋在了下一层的详情页中。Teavana移动端网页茶叶缩略图并没有什么卵用：用户无法通过这种级别的视觉信息去选择他们想要的茶叶，因为在这样的视图下，它们本质上没有任何区别。相反，如果仅凭借文字，用户很难做出合适的选择（至少在不来回跳转页面的情况下），那么设计中就应该考虑使用缩略图。这种情况多发生在商品或是服务购买中，用户往往都被喜好情绪主导，比方说两条裙子，它们之间的差别估计也只能靠图片来说明了——哪怕是再不起眼的图片。当然，如果列表的内容本身就是可视化的（比如视频或是照片），那么缩略图用于帮助用户浏览页面和导航是再合适不过了，确保使用足够大的缩略图，或是保证相关必要文字展示的基础上使用宫格排版。那位置呢：左还是右？一旦决定要在列表中使用图片缩略图，那么问题来了，放在哪呢？缩略图应该放在说明文字的左边还是右边，应当取决于图片与文字信息的权重比较。究竟图片是用户浏览列表的最重要信息？还是只是辅助的信息？如果图片使用户浏览列表的首要因素，那么将它放在左边（适用于从左至右阅读习惯的语言，如果是从右至左阅读习惯的语言，就反过来），这样能帮助用户在浏览列表是快速的过滤查找。反之亦然，如果图片相对于文字次要一些，那么就将图片放在文字的右边。图片相对于文字的优先程度同样也应当用于决定缩略图设计的尺寸。图片越不重要，尺寸就应当越小。然而，需要注意的是，如果缩略图过小的话，识别性就会大大降低，甚至失去在列表中存在的作用（在减小图片尺寸的处理中，可以同时使用剪切和缩放，这样可以缓解由于过度缩放造成的识别性问题）。从另一方面来说，过大的缩略图一定程度上也会不合时宜的吸引用户过多的注意力，或是引入相关说明文字的设计问题（例如，为了显示出完整的说明文字，字体大小有可能会受到影响变得难以辨认，或者保证阅读效果的前提下，说明文字可能无法全部显示出来——这些都是对体验的伤害）。还有，大图片需要更多的加载时间——这也是不容忽视的问题。用户在选择酒店时，对酒店的实际环境十分在意，所以缩略图是很重要的，哪怕它相对于其他一些信息例如价格或是酒店星级要次要一些。左图：Hotel Tonight中的缩略图的尺寸足以让用户识别细节，但是酒店的名字却被截断了。右图：的设计中，给予文字区域更多的空间，然后缩略图却小到几乎没有任何作用。另一个能帮你决定将缩略图放在哪儿的因素是，对于列表中的所有项目，是否都有合适的图片。如果没有的话，可以把缩略图放在右边，用于辅助文字信息。这样能确保文字都是左对齐的，而用户的视线流就可以沿着左侧往下，帮助用户更快的找到感兴趣的内容。左图：LA Times’ 最下面的三张缩略图都太小以至于无法辨认图片中的细节，也无法吸引用户，可是受到设计模式的影响，每一条新闻都必须在左侧配一张图片。右图：New York Times则使用了右对齐的缩略图设计，没有合适缩略图的时候还可以不显示。当可视化在新闻的传播中占据主导因素时，还可以使用全尺寸的图片。结论如何决定相关图片的重要程度，可以引入一些例如问卷或访谈这样的调查用户态度型的研究，洞察用户的倾向。一旦图片的优先级确定了以后，缩略图的设计方案就很容易决定了。△ 缩略图使用攻略最后要一如既往地安利纸模的设计方法，请确保使用纸面原型去尝试不同的布局，以防在找到正确的道路前浪费过多的时间和开销。原文：TerryFan
来源：优设网 加入我们微信：点击上方蓝字“视觉交互设计”添加关注QQ群－北京UI周末学习组qq群：QQ群－UI/UE设计专业交流q群：QQ群－一个像素设计活动qq群：
视觉交互设计(gh_)
　文章为作者独立观点，不代表微头条立场
的最新文章
果然，作品漂亮的设计师颜值也不会低。
在如今“用户为王”的时代，当“以用户为中心”的理念已经深入人心时，良好的用户体验便成为提高用户粘性的必要条件
4.1 栏4.1.1 状态栏状态栏展示了关于设备及其周围环境的重要信息。默认（深色）内容浅色状态栏：是透明的
4.2.11 表格视图表格视图以一个可滚动的单列多行的形式来展示数据。API注释想要了解如何在代码中定义表格
设计原则美学完整性美学完整性不评判应用的视觉设计，也不是用来描述应用的风格特征。美学完整性是指在一款应用的视
声明：本文从设计角度说明设计稿及倍图适配问题，不含前端技术，码农慎入首先我们看看百度搜索引擎上常见的认识入手
如果说我们做的业务最终输出的是一首歌，那我们设计师就是歌曲的编曲者。产品和运营进行歌曲本身的创作。
如果说我们做的业务最终输出的是一首歌，那我们设计师就是歌曲的编曲者。产品和运营进行歌曲本身的创作。
特别是混迹互联网行业的，特别是移动互联网圈内，每一个人都有自己的阅读书目。点击阅读原文获得相应书籍pdf版。
特别是混迹互联网行业的，特别是移动互联网圈内，每一个人都有自己的阅读书目。点击阅读原文获得相应书籍pdf版。
今天跟大家聊聊手机APP界面设计规范之标准色彩规范。如何教大家使用色彩这个很神圣的工具。我们先来回顾下。什么
项目背景智慧版1.0推出之后，简单清新的安装包设计效果得到了广大用户的认可，有不少朋友给予了肯定这让我们很是
编者按：相比App，移动Web成本少，实现难度低，数据追踪更全面，还能快速调整。优点非常多，随着全民宽带的提
APP视觉包装设计：其实就是指APP设计师对自己设计的APP产品通过平面视觉的手段进行场景设计和宣传设计等手
我们常常从客户或者来参加我们培训的人那儿听到这样一个问题，“在移动端的列表设计中，是加图片缩略图好呢，还是不
@腾讯ISUX Viconia：之前研究过一段数据图表的最佳表达方式，随着手机端应用层出不穷地发展，这次将数
是时候开始准备挥手告别2015年了。这一年中涌现了许多优秀的设计作品，设计趋势也在时间的推移中渐渐转变。在这
不知道你是否还记得前不久让我们印象深刻的《支付宝同胞兄弟“蚂蚁聚宝”诞生：第一支只谈钱的广告》宣传视频。没错
编者按：今天这篇超级赞！！作者从字体选择、如何与图像搭配，如何运用色彩等等下手，给了超多浅显易懂的案例示范，
在接触一款新应用的时候用户常常会看到一些引导页，但在操作的时候直接当透明的就快速滑过或跳过了，这种时候，大家
编者按：打磨一个成熟的产品和设计一个全新的项目，你选哪个？今天Facebook总监的这篇好文说出了不少设计师
原作者：优设网《七种武器》为著名武侠小说家古龙著名作品代表作之一，共分为：长生剑、孔雀翎、碧玉刀、多情环、离
想获得友好的布局、配色以及创意灵感？今天为大家精选近期美丽的应用UI设计作品，有很多值得参考的地方，比如作品
我们知道Dribbble上很多优秀的设计作师，经常能看到很多优秀的UI作品在里面，然而近期越来越多的GIF动
多动图慎入。 (??ω?｀)还是入吧。
我们的qq群中，有位同学提出想将ps照片转成手绘的样式，这个是需要美术手绘功底的吆……看看这些美美的照片~喜
现在的UI设计团队通常先设计组件，多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留
除了界面 同时也包括交互部分，逐渐深入可以参考那些书籍和网站。他们需要用到哪些软件？写在前面（不缺钱，找个培
Apple Watch，买，还是不买，这是一个问题。赶快决定吧，3月9日就是苹果发布会了，中国很有可能是Ap
今天这枚拟物化的购物袋图标，非常写实，教程界面全中文，过程详实，方便好学，另外有一个添加花纹的小技巧很实用，
虎嗅注：本文由新浪科技、腾讯科技、网易科技的报道综合而成。北京时间今日（3月9日）凌晨，苹果在美国旧金山芳草
郭楠：作为一个移动界面设计师，如果你已经细细读过Material Design的设计指引，那么这篇文章是一篇
编者按：前几天的“蓝黑白金”事件，已经有设计师同学揭秘了误差的原因，木想到今天百度的同学出了升级版的教程，聊
购物体验升级！这么动感的画面，你能忍住不买吗？
本文来源于素材公社
视觉设计的理解
——正确理解设计师和一些设计原则
在小组学习初期我们先分享了对于视
时下，“material design”总被设计师们频频提及。它是谷歌在I/O 2014上发布的新的设计语言
编者按：一枚超级漂亮的图标教程。今天@P大点S微博 同学临摹了一个色板图标，效果好到发指，重点是图层样式的运
对于视觉设计的理解
——正确理解视觉设计师和一些设计原则 在小组学习初期我们先分享了对于视觉
对了一个APP开发初手来说，可能心里有很多的疑惑：屏幕设计为多宽，宽度是不是应该设置为百分比；按钮大小多大，
在这里我不想分析拟物设计和扁平化设计的优劣，更不想说谁更好！在形式服从内容的今天，我只能说哪种设计风格更适合你的产品，就像你问我水和酒哪个好喝一样，我没有办法回答，只能看此时你最需要什么。
心灵富足，心情平和，自然，是设计师应该具有的品质。即使面不朝大海，心要春暖花开，从此做个心灵丰富的人。
马上就是实习和校招的高峰了，很多同学在各种渠道问如何对付『群面』。作为面试流程中往往出现的第一道难关，群面以
今天，迎来了小朋友们自己的节日，六一儿童节。祝所有的小朋友们天天开心，快乐成长！这个夏天，“我要上Q首”儿童
在我经历的设计项目中，所有的项目成员都会要求设计师优先制做所谓的「典型页面」，常见的就是产品的首页和详情页。
提供最新的ui/ue设计资讯和分享ui/ue设计文章，并有其他有趣的视觉设计和工业设计。
提供最新的ui/ue设计资讯和分享ui/ue设计文章，并有其他有趣的视觉设计和工业设计。大九九小糖酒的推荐 | LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
大九九小糖酒 的推荐
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
this.p={ dwrMethod:'querySharePosts', fpost:'1cf73ba2_b871990',userId:,blogListLength:30};just a脑洞的喜欢 | LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
just a脑洞 的喜欢
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
this.p={ dwrMethod:'queryLikePosts',fpost:'1da78a56_b7cf497',userId:,blogListLength:30};找一张图片。是一个女生支着头坐在教室窗台边，看窗外。蓝色的天空。好像教室里还有人在。_百度知道
找一张图片。是一个女生支着头坐在教室窗台边，看窗外。蓝色的天空。好像教室里还有人在。
提问者采纳
baidu.baidu.hiphotos.hiphotos://d&/zhidao/wh%3D600%2C800/sign=4a20aa062b41a/79f0f736afc49beac4bc.hiphotos.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http.baidu://b://d.jpg" esrc="/zhidao/pic/item/79f0f736afc49beac4bc.
其他类似问题
为您推荐：
看窗外的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁