如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
常见的APP 图文布局有哪些？不同按钮有哪些用法？今天这篇总结帮新手认识基础知识，赶紧来收！用户所关注的内容以及不同的业务诉求决定信息的优先级排布，所以没有通用的布局，只有适合的布局。
1. 上图下文
上图下文更强调了图片的重要性，以「见」这个属性为优先，上图下文需要注意的是图片高度过高会严重影响版面效率，而一个具有商业化目的的产品对首页的版面效率异常看中，同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。
如果确实需要以大图+文的上下方式来布局，尽量找到版面的平衡点，考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示，例如4:3，2:1，16:9等。
宫格排列式的上图下文能够极大的提升版面效率，一般更多用于电商平台，在首页将某个模块的优质商品进行透出，提高转化和流量。缺点是缺乏信息完整度，在布局时需要考虑更多因设备、极限值带来的不同状况的问题。
可以看出，严选将金额跟在标题后面，而非固定位置，这样做的好处是将标题和金额关联度更高，形成一致性，缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。
2. 左图右文
左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图，在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示，否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。
菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面，也不会弱。
方形缩略图是最常用的形式，不至于太窄也不至于太宽，对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害，通常在视频缩略图会用到，但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间，同时版面的留白也更大，但是如果右侧信息过少，则会让页面有些单调和不完整。
左文右图就不再赘述，现在大多数左文右图在咨询和旅游产品中使用的更多，因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容，而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率，提升了多少满意度。我们可以简单的理解，如果说的是一件事，那么文字比图片更重要。如果说的是一样物品、人，那么左边放图更合适，体会一下。
3. 图文混排
为了使信息传达的更一致，通常如果没有大量的文字信息则我们会选择文字与图片混排的形式，为了适应多变的图片，我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。
其实严格意义上来说，能通过点击触发交互动作的控件我们都能将它定义为按钮，但是如果这样定义那就没的玩了，所以我们将移动端的按钮定义为具有引导性并且可点击的控件。
例如京东金融查看历史支取利率后的箭头，其实这才是这一行的引导按钮，但是为了更好的触发点击通常会将整一行都作为点击热区。
所以为了区分不同的按钮的用法，我这边将按钮进行了一个分类：主线场景、支线场景、异常场景。
主线场景下的按钮通常会使用的比较大，为了强化和引导核心的任务流程，所以该按钮应该是最醒目的。
样式通常会分为通栏和非通栏，而通栏则是从 MD 设计中衍生出来的一种形式。
1. 主线场景
要注意的是，通栏和非通栏按钮我们到底该如何选择，首先我们需要知道这样的按钮都是放在页面的底部固定显示，不会随着内容滚动，如果选择通栏按钮，则更适合可滚动的页面容器，也就是说一页中内容较多在一屏幕中无法显示全的页面，优点是按钮的优先级会很高，但是在 iphone X 这样的设备中，适配会纠结一些。
而如果选择不通栏的按钮，我们要考虑的是页面内容是否很长，如果很长需要在按钮底部加一层白色背景，尽量不要让内容穿过按钮，因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。
所以我们会发现考拉和淘宝虽然有样式区别，但实际上都相当于在底部有一层内容遮盖的部分。
2. 支线场景
再来看支线场景的按钮，支线场景的按钮一般能够分为：图标、文字、图标+文字、框+图文字+图标这样几种类型。
图标就不用说了本身就具有可操作的属性，也有修饰的属性，关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标，就是一种修饰型的图标，为了更好理解这里的定位是一种楼层定位，随着页面滑动到不同的业务模块而会跳动，这里并不是一个 tab 的功能，不能算是切换页面。
如果把定位按钮单独拿出来放在导航栏，或者页面右侧的空白处，我们就会觉得他是一个可点击并能够进行跳转的按钮。
包括「查看全部」这样的文字，即便不加箭头我们也会尝试去点击，高亮显示就更加明显，用户已经形成这样的意识，但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂，需要通过参考上下文的情景来做不同样式的选择。
不过支线流程毕竟是支线流程，为了不打扰主线流程，尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛，其实这个按钮用了实心的色块做了强引导，目的是为了提高客单价，同样只要是对最终目标有帮助，并不能算是跳失，说不定回来的时候买了更多更贵的东西。
3. 异常场景
异常场景下的按钮不需要做的过于醒目，一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态，并不是一种强烈的引导。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
UI巴巴 2018-07-05 21:02:31
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
相对于其他类型的APP，商城APP设计难度比较高，因为电商APP业务比较复杂，既要展示完整的业务功能，又要保证用户体验，非常考验UI设计师的设计功力。所以小编精心挑选了几款比较优秀的电商APP界面设计作品，希望对设计师有借鉴意义，里面的一些精髓还是值得一“抄”。
1、极简的设计，适用安卓平台，跟其它设计不一样的是筛选按钮放在底部。
2，商城的登录页和产品信息流页面。
3，安卓平台的商城app首页。
4，极简设计的商城app。
5，卡片式的产品翻页设计。
6，渐变色的运用，不对称的排版。
7，商城产品列表页设计。
8，服装类商城，筛选器的设计。
9，生鲜类商城app的设计。
以上商城app设计案例里有产品页界面设计，也有商城首页的ui设计。电商APP的设计不能只满足表面的视觉层面，还要关注业务的流程，这样设计出来的APP才能吸引更多用户访问和购买你的产品。
人人都是产品经理 2018-08-19 14:05:13
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本文将致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。enjoy~
想象一下你努力工作，花了很多时间来创建一个详细的原型，然后一个客户拒绝它甚至不接近他想要的。听起来很熟悉，不是吗？至少每一个设计师都经历过这样一个不愉快的局面。也许现在每个人都希望得到一些相关的建议，如何避免这种情况，但真正说没有一个完美的决定。
然而，有几种方法有助于降低客户拒绝的风险，并节省设计师的时间和勇气。今天的文章致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。
情绪板技术不仅在设计领域流行，而且在许多创造性的专业人员中流行。情绪板是确实的板（数字或材料），从照片到各种肌理，人们填充不同种类的东西以至于能将想法和概念形象化。
与线框和原型不同，情绪板不显示未来项目的详细图片。它们意在传递正确的情绪，并带来产品期望的情感。
情绪板是一个有用的工具，帮助设计师有效地与客户和团队成员合作。纸板可以在一个紧凑的时间框架内轻松地被创建，并把抽象的想法变成现实。这样，设计师可以有效地与他人分享他们的想法，因为视觉材料总是比流畅的说法更好。
情绪板是一个很好的方法来实验调色板，字体和风格，以及规划一个项目的视觉层次。每个人都自己决定在情绪板中包含哪些组成部分。UI/UX设计师通常使用各种样本以至于可以来描述界面元素的特征。让我们来看看情绪板常见的几种类型。
设计师经常收集免费高清的图片，方便他们在项目或其他地方使用这些素材。这些收集品可能有助于情绪板的创作。将美丽的照片组成的自由拼贴是传递设计理念的一种有效方式。此外，拼贴可以用插图，字体和颜色案例来构成。
创建这种类型的情绪板是最快的，也是最容易的。但是，如果客户比较关注细节，他们可能并不会对将来项目中的这些拼贴感兴趣。
灵感来源和想法可视化的另一种方法是找高质量的参考。网上有很多资源，如Behance和Dribble，在那里设计师可以通过免费浏览的方式获取灵感和还有一些实际项目的示例。由一个相同风格或任何其他特性联合起来的设计作品可以很容易地说明一个新项目的想法。此外，这样的情绪板可以帮助客户有效地理解一个概念，因为他们可以看到类似的参考，并能够大致想象出他们的产品会是什么样子。
这些情绪画板更像是原型和线框图。他们的目标是展示产品的结构和视觉层次。不同之处在于模版画板上的UI元素没有线框图中的原型或示意图那么详细。把随机的插图和照片来当做界面的构成元素，并以此来展示（数字）产品的布局。此外，可以用这种方式选择图像，从而更容易的确认合适的配色。这种方法比原型更快，因为它不需要细节。
我们中的许多人可能注意到，在设计工作流程中，线框和圆形总是被描述为基本阶段，而很少人提到情绪画板。有些人认为他们是在浪费时间，或是认为这只是一种“娱乐”。经管如此，仍然有很多人把画板作为每个创意过程的一部分。但是他们为什么要选择这项技术呢？在这里，我们收集了设计师的原因清单。
情绪画板的第一个且很大的有点是它不需要花太多的时间就能完成。这意味着，在几小时或者更少时间内，设计师就可以创建一个视觉指南，为客户提出一个概念。情绪画板可以很容易地编辑，这样既省时又省力。
这样的视觉指南是一个很好的基础，可以快速的跳转到下一个阶段——原型阶段。此外，如果客户对结果不满意且想要一个新方案，设计师也不会变得神经质，因为他们不用花一整天的时间来创建一个详细的演示。
当然，设计师不能总是依赖灵感，因为他们有工作要做，然而，如果创造者收到启发，事情就能更有效的进行。情绪画板是一个寻找创意和热情的好方法。美丽的照片和插图有助于找到正确的情绪和风格。此外，如果可能，你可以试着通过你周围的东西来创建一个情绪画板当做素材使用。据说手工对创造性思维有很大的影响。所以为何不试一试呢？
一个拼贴内可以包含照片、插画和颜色形成布置引人入胜的样品。在一个板上混合不同颜色的图片，即使UI元素还没有准备好，设计者也可以用调色板进行实验。
当产品处于抽象概念阶段时，设计师和客户有时很难在讨论时相互理解。例如，双方可以以不同的方式看到某种风格，从而引起争论。这就是为什么使用一些视觉参考如情绪板总是一个好主意
继续上面的观点，应该说任何长的报告都不能比视觉呈现更好地解释你的计划和想法。在客户的脑海中，文字无法成形，但视觉材料是一个可靠的指导，帮助客户深入深入细节并正确理解你的想法。
在早期阶段说明你的想法，这样客户可以看到你的计划以及他们的产品是如何成形的。
如果一个创意团队没有收到客户关于设计风格的指示，任务就落在设计师的肩上。要了解一种或另一种样式如何工作，不必为它们中的每一种构建详细的原型。添加到情绪板不同的纹理，实验类型的插图，测试字体，并改变颜色。用情绪板来尝试选项比用一个接一个地改变原型更快、更方便。
获得客户信任的方法之一是让他们觉得自己深入参与了一个项目。因此，在这个阶段，如果他们愿意，他们可以积极参与风格和样本的选择。在非设计师的情况下，做模型是一种很简单的技巧。
可以建议客户对照片和图片进行拼贴，如果不是新客户，也可以提供参考。通过这种方式，设计师可以轻松地了解客户的品味和偏好，并了解他们对项目的期望。
为了更实际地介绍这个问题，我们想向您展示由Tubik设计师Dima Panchenko编写的用于用户界面设计项目的扩展情绪板集。他还做了一些常规笔记向客户展示了情绪板，这对沟通的过程和选择了项目的概念有积极的影响。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
香港理工大学教授John Heskett认为，作为设计师有三个阶段性的价值：修饰者，区分者，设计驱动。在信息爆炸的今天，设计师每天阅读大量的设计文章、作品，但却依然提升缓慢。一个优秀的设计作品：到底好在那里？背后思考是什么？品牌价值有哪些？…为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计，帮你解读每个设计背后的思考！让基础审美养成设计好习惯的第一步。
------------------任何设计问题添加微信：uiskyss---------------------------
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。
所以此次在父亲节进行发力，制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。
相对于每年母亲节的声势浩大，但是一到父亲节世界就都安静了。这是机会也是挑战，机会在于因为父亲节平均声量较小，所以产出较容易被大家所看到，同时也面临着关注度不够的客观情况的挑战。
这个用户的状态反映了许多人父亲节送礼物的常态，送来送去好像什么都不合适，最终还是充了一笔话费，这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了，一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子，他们之间发生的火花。
但若单单如此，则略显单调，如何增加趣味性与可玩性呢？
确定了主题后开始具体着手项目具体制作，由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5，下面会每一步说明，我们在这些地方都是怎么做的。
剧本是故事性交互 H5 的重中之重，也是其对用户是否吸引的关键因素，若缺乏吸引力用户则无法到达最后看到品牌曝光，一个剧本最基本的需要一个通顺且合理的剧情，更高的要求是要充分利用用户好奇心，获取用户注意力，完成品牌与功能的曝光。按照写文章的方法，一个饱满的剧本需要有三部分组成。
具体的配音工作交给配音外包商就好，我们要做的就是对最后效果的把控。
首先要了解匹配原理，为了节省开发时间与资源，六种方言动画全部采用同一种帧数与时间，所以需要匹配每一句的配音时长。
配音时长可以通过三种方法控制：
确定好玩法流程后，进入视觉阶段，这次整体的设定是不同区域的爸爸形象，要表现出各区域的特色，结合好配音，才会达到比较理想的效果。
在人物的刻画上，视觉是有很多表现形式的，但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音，为了使整体效果更自然，更接近用户的想象，加上对产品用户群的定位，我们摒弃了低龄卡通的设计方向，在人物设计上选择了写实的设计风格，更符合用户心理对父亲这个严肃、严谨的心理印象。
结合对话的内容以及动画的表现形式，在细节刻画颜色搭配上增加复古的味道，使人物更活泼不呆板将字体图形化设计，结合中国元素，提炼各省市的简称加上有特点的人物设计，能更快速的帮用户选择以及增加亲切感，以下就是各区域的爸爸形象设计，有没有一款打动你呀。
人物的设定出来后，主页面的视觉风格就比较好把控了，复古的老式画报风格，是一个很好的选择～既能突出人物形象，又能把内容很好的划分整合。
板式设定：
主页面整体视觉风格确立以及版式布局，画面主体还是以人物形象为主，配合动画让整个画面更有动感，强调打电话的动作，更贴近产品。
在动画的设计上，也是遇到了很多困难，因为6个区域人物分为独白、对话、听电话3个部分的动画，而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内，又要保证形态的自然有趣，又要能对上字幕配音。
这里的难度非常非常的大，需要每个步骤都配合的刚刚好，非常感谢开发哥哥耐心打磨，最后的呈现还是很满意的。
动画效果，页面过多就选一部分进行展示：
最后整体数据效果还是比较理想，用户完成全部选项占比整体 UV 34.89%，说明 H5 内容对用户吸引度较高，能够用内容本身吸引用户到达广告落地页，完成运营目标。也带来较高的亲密充数据，相较平时有显著提升，给亲密充带来绑定与充值。
第一次制作配音动画相关的运营 H5，制作初期既期待又紧张，中间也遇到了几次看似无法逾越的难题，最终呈现结果也还较为满意。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
这段话是我补上的，我是设计师Johnson1949
提到谷歌原生系统UI大家有的人不是很喜欢，有的人可能已接触到安卓手机系统＝谷歌系统UI其实，有一些偏颇，2014年的谷歌系统UI还是比较难看，不过自从采用material design风格以来，流畅度和色彩搭配，图标的设计真的不错了，目前小编用的是motonexus6，旨在体验谷歌系统UI。有需要的可以试一下。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
需要做一个“开屏页”
“哪个开屏页”
“带跳过的哪个”
“带跳过的。是一页的那个还是可以滑动的？”
“滑动的”
上面的对话不知道有没有很熟悉。
我们都知道APP在启动时会有一些页面先行展示，例如这样
通常来说我们会简单的把它们统称为“开屏页”或者“启动页”
但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝
宝们表示很委屈。
其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。
定义：闪屏是每次启动过程中展示给用户的一个过渡页面，用于减缓用户在打开应用时等待的焦虑心情。
交互方式：闪屏通常是一张背景图片，无法进行交互，无法点击也无法跳转
劣势：无法跳转，只能进行展示作用，无法很好的承载营销需求
优势：展示时间不可控
使用建议：
避免包含太多文字字符（阅读速度慢的话可能还没看完就关闭了）
不用过去吸引用户的注意（干扰用户的本来目的）
不要做广告（干扰，且不能点击）
定义：启动页形式闪屏但拥有交互功能，常用于展示营销活动广告图片并引导用户点击
使用示例：常用与展示营销活动广告图片并引导用户点击
交互方式：
1、点击页面或按钮进入活动承载页
2、点击跳过，跳过启动页，进入首页，或N秒后自动消失
注：由于加载时间不确定，启动图通常会缓存并存在下次启动时使用
定义：用户安装或更新后首次启动时展示数个页面，常用于介绍应用的核心概念，功能玩法，使用场景，核心变更
使用示例：
交互方式：
1、左右滑动可以切换
2、最后一页页面可点击进入
注：首次打开才出现，之后就不在出现，清除用户数据，再次打开应用可以看到
使用建议：
1.轻易不要使用引导页,以免阻碍用户快速的使用体验
2.为了降低用户反感程度,引导页数通常越少越好(<5)
3.尽量提供“跳过”按钮
4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明
(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)
劣势：
增加了用户进入产品的时间，用户翻页过多，可能会失去耐心，降低好感度
通常来说：开屏三兄弟顺序如下：
流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。
Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。
这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。
不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信
你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~
云和数据西安中心 2018-07-09 13:24:29
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前言
搜索框是 app 内最常见的控件之一，可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下，根据页面中搜索的重要程度，搜索框也有着不同的样式。
下面就和大家聊聊常见的四种样式：一级tab、顶部搜索、搜索 icon 、隐藏式搜索。
位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ，简单、识辨度高符合用户已有的认知。
部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能，在“发现”页面中，由于增加其他运营内容导致流量被分摊，搜索相对就会弱一些。
一级 tab 相比其他方式，搜索过程更方便，点击操作更容易。
例如在贝壳找房 app 中，“找”作为该 app 的重要功能单独设立一个入口，用户搜索时无需进入二级页面中去完成条件筛选，搜索过程更方便、一目了然。
在筛选中选择总价、房型、特色、朝向等条件后，点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出，再次回到该页面后，仍会保留上一次操作的结果，方便下次修改和查找。
贝壳找房和 App Store 搜索入口在底部导航，这个位置符合拇指热力区操作，屏幕偏下的位置单手持握手机的时候更容易点击。
需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口，过于拥挤不适合用户点击。
位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。当用户浏览的时候，搜索框也会悬停在顶部，不断引导用户进行搜索。
通常以搜索框的形式存在，为了突出搜索框，搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。
不同类型的 app 搜索功能也不一样，除了文本搜索，淘宝有图片搜索功能，方便拍图找物；虾米音乐还有语音搜索功能，方便查歌找曲。
顶部搜索相比其他方式，搜索入口更显眼，为转化提供更多流量。
例如在天猫 app 中，当用户进入的时候，部分是带着明确的购买意图，这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上，即使是在上滑的时候，也是在顶部。
在顶部搜索框内推荐了客厅地毯，根据用户的历史搜索行为触发的引导，在用户已经搜索的基础上，转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词，能吸引更多的点击量。
需要注意的是结合场景去使用搜索功能，例如支付宝，刚进入 app 用户可能找不到想要的功能在哪里，这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候，用户想要浏览推荐内容，搜索功能相对减弱，为了减少空间占用，搜索框变搜索 icon 。
使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。
搜索 icon 相比其他方式，搜索位置更灵活，可以单独出现，也可以和其他功能组合。
当搜索功能在页面中不再是高频使用功能时，仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少，可与其他功能组合出现，例如 in ；也可单独出现，如猫眼，仅靠图标标红来提示用户此功能。
需要注意的是在同一个 app 的不同页面中，由于对搜索功能的需求不同，有些页面会选择搜索 icon ，有些页面会选择顶部导航。例如天猫 app ，在品牌页面中，对于用户即将浏览的内容都是根据用户行为产生和运营推荐的，自然搜索功能也会弱一些，采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品，采用顶部搜索框。
位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的，当用户下拉页面时，顶部搜索框才会出现，这就和使用场景密不可分。
微信首页（iOS端）刚进来的时候主要以处理最近回复为主，搜索功能相对弱化，在用户浏览列表的时候，搜索框也不会悬停在顶部导航。而在第二个 tab 通讯录列表中，主要以查找联系人为主，搜索功能一开始进入就显示在列表顶部。
总结
绝大部分的 app 里带有搜索功能，搜索功能可以帮助用户快速找到所需内容，减少时间成本。搜索也是提高流量的重要入口，吸引用户注意力。
但想要搜索在页面中恰如其分的应用并不那么容易，需要引导用户行为和分析使用场景，这就依赖我们前期大量样式积累，才能输出合理的设计方式。
我们再来回顾文中提及的四种搜索框样式：
1.一级 tab ：位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。
2.顶部搜索：位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。
3.搜索 icon ：使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。
4.隐藏式搜索：位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
据悉，Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面，有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。
小小设计控 2018-07-30 09:34:38
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、提取设计原则关键词
1. 提取一级关键词
第一步，先要去提取出关键词，这个关键词怎么来，有几种方式获取，第一个从整个公司战略出发，任何一个产品一定有他的战略，品牌战略，商业战略。举个例子，假设我们是 eaby，公司今年战略是全球化，高品质，正品，那么这个就是一级核心关键词，所有的设计语言一定要和公司战略结合起来，可以理解为战略关键词是整个设计语言顶部金字塔。
二、运用情绪版提取二级关键词
有了一级关键词后，需要去思考，那么什么样的设计能给人全球化的感受呢，什么样的感觉能有高品质，正品应该传递什么样的感觉呢？此刻需要用到第二个方法就是情绪版，通过情绪版去把符合这些关键词感受的图形具体化。
三、高品质特征是什么？
下图是一组日本的花茶设计，那么在这组设计中，设计师是如何体现高品质呢？
△ 首先包装很精美耐看，设计简约
△ 做工精量，整个产品包装，都是在富士山脚下
△ 采摘环境很透明，值得被信任
△ 整个品茶的过程也特别让人向往，很有仪式感
△ 整个的设计很完整，很有设计感在里面
通过以上案例拆解，我们能对这个高品质的关键词有更加进一步的理解，高品质原来在情感层面是一个这么抽象的感觉，但是很多同学会问，那么这二级词汇也很抽象，如何靠这个来做设计，很难去理解及表达，别着急，还有下一步。
1. 高品质设计表现形式？
关于高品质在视觉形式上如何来体现了，哪些设计感觉能代表高品质呢，这个时候就需要我们去寻找一些设计参考，这些案例要能代表高品质。
△ 清晰的有品质的图片
△ 牛皮癣，不精致不可取
△ 优雅的排版和留白，文字清晰，杂志感受
△ 图文密集，缺少版式不可取
△ 精致的布局，栅格的体系，给人品质感
△ 缺乏版式及设计感
△ 有设计细节的
△ 无细节不可取
△ 合理的配色，简单清晰
△ 山寨的配色不可取
△ 设计的延续性和完整性
2. GOOD CASE
3. BAD CASE
四、设计分层
以上就是我们从一个战略关键词逐步推导到一级关键词，到二级关键词，到设计手法，以及对应设计表达，推导的一个全过程。
五、总结
以上大概为一个设计关键词的全部推导过程及到设计手法的确定，也是设计语言里面最难的部分，后面的关键词也是类似的思考方法和思路，最终通过推导我们需要得出每个关键词的情绪图，以及对应设计特征，最终需要在界面中展示的形色字构质，一个完整过程。
比如国际化，同样通过前面思路，我们需要去思考国际化如何在设计中体现，去提炼出代表国际化的象征物，如地标，国旗，邮戳，货币等等，包括如何在界面中融于国际化元素，以及人物和节日场景。
结语
希望大家可以通过我这期的分享，能够详细理解到如何从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质，大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。
最后，依据推导出来的原则，以及对应的设计手法去做概念，去在界面中运用，最终完成设计语言第一步，设计关键词和设计手法定义。
图片素材作者：Tran Mau Tri Tam ✪
蓝蓝设计的小编 http://www.lanlanwork.com