“搜索”是产品中一个非常必要的功能模块，搜索就像为用户提供了一条便捷的绿色通道，方便用户快速检索内容。
搜索动作在 App 中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。
从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：
其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。
回想常用 App 的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。
1. 搜索图标
页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。
2. 基本搜索框
基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。
3. 文字提示类搜索框
和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。
△ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃的和好玩的。
4. 功能类搜索框
之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。
△ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。
△ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。
使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。
位置
大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。
△ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。
样式
搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。
△ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。
搜索框
点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。
△ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。
键盘
点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。
搜索页
搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。
△ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。
关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……
△ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。
△ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。
删除/取消
当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。
△ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；
△ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。
搜索提示
在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。
通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。
字数限制
目前我所知道的大多数 App 在搜索时都没有字数限制问题。
回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。
△ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。
符合预期
搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。
智能提示
智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。
△ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。
无结果提示
△ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。
这里介绍了关于搜索框设计的一些基本体验，学会从整体到局部再到具体细节一步步分析，大家会挖掘到更多更细的设计要点。
文章来源：优设 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
首先我们要知道APP的启动页和闪屏不是一个东西，启动页是用户打开产品第一眼看到的页面，闪屏是启动页之后出现的页面。
启动页是一个APP必不可少的页面，在iOS规范中，上架AppStore必须有启动页，Android系统会有1-2s的白屏，所以两个端都需要启动页。苹果官方给的解释是，为了增加APP启动时的用户体验，确实如此，当打开一个产品时，首页内容都需要一定的时间加载。
启动页的设计角度一般是品牌信息传递，建立用户与产品的认知，一般时常都在2s以内（看网速和手机性能）。启动页的设计一般不做动画效果，因为只要是动画，就会让用户感觉等待时间变长了。
闪屏是启动页后面紧接着出现的页面，当然有很多产品没有闪屏，如微信、淘宝等，因为产品的定位和运营模式不同。闪屏与启动页不同，闪屏是用来运营的，比如投放日常广告、活动运营、节日等等，大多数产品闪屏出现的时间是3s或5s，一般都提供“跳过”按钮。
闪屏的设计为了运营，所以可以适当有动画效果或者视频，目的是能够更加吸引用户，加深印象或是提高点击率。
启动页是写在安装包里面的程序，如果更换就得发版，闪屏的程序设计是从后台配置完成，所以可以满足日常更换。
对用户来讲启动页和闪屏展示的时间越短越好，那时间减少不了，就可以通过设计让用户对时间的感知变少，从而提高体验。看下图，两张图通过平滑过度，给用户的感觉是一张图在变化，这样时间上给用户的感知是变快的。
用户等待感知短
当然对于不同的产品，设计的倾向性是不一样的，比如网易云音乐，启动页是强烈的红色，然后生硬的切换到一个跟启动页没有任何视觉关联的闪屏。这样的设计形式，用户等完一个页面，又等一个页面，那就会给用户在时间上的感知是变长的。
品牌感知传递强
但是，对于一个音乐产品，渲染产品调性传递品牌，要远远大于减少用户等待时间的体验。所以，从这点来看，网易云音乐这样的设计形式，也是非常恰当的，设计应该根据产品的定位，来确定设计的倾向性。
敲黑板，划重点！ 下面的内容才是本文重点！
手机尺寸那么多，闪屏设计尺寸应该如何定义，很多APP的解决方案是使用两张不同比例的闪屏，还有一部分APP是区分系统，iOS适配一张图，Android适配一张图。
下面我以小米商城闪屏的改版为例，分享如何用一张闪屏尺寸适配所有机型，并详细介绍适配的原理。下图是改版前的闪屏，需要上传两张图，一张1080*2070（不带底部logo），另一张是720*1280（带底部logo）。
老版本闪屏需要上传两个尺寸图
两张图，设计人员就需在两个模版上进行排版设计，小米商城闪屏更换频率非常高，这样其实会付出很多时间成本。所以，我们团队尝试使用一张图适配所有机型，这其中的难点就是，找到一个合适的尺寸适配所有手机，并且闪屏内容的呈现在任意手机上都得合适，内容不能被裁剪。
先跟大家普及一下小米公司APP的设计稿尺寸，因为小米手机是Android系统，所以UI设计稿会优先适配安卓的主流手机，即1080*2340，这个尺寸接近iPhone12的比例和尺寸，切图相当于3倍图。
所以，闪屏宽度设定一定是1080px，然后高度分为两部分组成，一个是内容运营区（闪屏内容设计区域），一个是logo位，如下图所示。
蓝色部分为闪屏
logo位部分由开发写到程序中，所以闪屏页面高度要去掉logo位高度。闪屏设计尺寸即是蓝色部分，正常来看应该是主流长屏分辨率手机与现存短屏分辨率手机的平均数即可，但其实并不可取。
因为，短屏分辨率手机毕竟使用人群是少数，设计的宗旨一向都是优先考虑大多数用户。所以，定义闪屏尺寸的原则是让类似小米11、iPhone12等主流比例手机呈现的完美，短屏分辨率手机如iPhone8只要呈现的不出错即可。
以安卓主流分辨率1080*2340为例（这个比例接近iPhone12），如下图，logo位高度设定为270px，把这个图切给开发，让开发等比缩放去适配所有手机即可。
很多安卓手机底部会有一个系统高度，这个位置不可以占用，但开发可以改变颜色，所以这部分颜色可以跟启动页或闪屏颜色调成一致。页面分辨率2340减去270的logo位就是2070，这就是长屏主流手机闪屏大概要呈现的高度，然后需要用这个尺寸去兼顾短屏分辨率手机。
把短屏手机也计算出来，安卓最短的手机比例是16:9（比例等同于iOS的iPhone8），以1080*1920为例，如下图，1920同样是减去logo位的270像素等于1650。
接下来就是最关键的时刻，要用1080*2070和1080*1650两个尺寸设定闪屏的设计模版。先说一下手机的适配原理，如果一个张图片的比例和手机屏幕不一致，开发设定是撑满手机屏幕，这时手机上展示的图片就会出现上下或左右被裁剪的情况。
所以，综合两个不同比例的尺寸，短屏手机裁剪上下，长屏手机裁剪左右，然后把呈现的内容保证在不被裁剪掉的区域。
闪屏模版尺寸设定尝试
最后经过很多次的尝试，最终选用1080*1920作为闪屏的设计尺寸，向上向下适配内容的呈现都非常合适。下图是iOS和安卓手机的适配效果，向下适配16:9的手机（裁剪上下），向上适配20:9的手机（裁剪左右）。
长短屏手机闪屏适配效果
定制闪屏设计模版
模版中页面上方留了较大面积，是为了让标题内容能够呈现在长屏手机更恰当的位置上，长屏手机内容靠上，看上去不会很舒适。底部空间留的较少，因为底部再加上logo位的高度，就会让页面看起来很协调。
最终小米商城的闪屏就是用一个尺寸适配了所有分辨率的手机，思路和适配原理都已经讲清楚，如果自家的产品是优先满足iOS手机，完全可以用上面介绍的方法尝试。
敲黑板！ 下面内容可能会颠覆你对UI设计的认知！
闪屏尺寸说完了，闪屏上面还有一个“跳过”按钮，这个按钮的位置设计非常非常重要，而且大有学问，会牵扯到广告学，按钮合理的设计会让一个产品的收入倍增。
还是以小米商城的闪屏为例，之前的闪屏“跳过”按钮在页面右下角，新版我把“跳过”按钮放到了右上角，为什么？
可以肯定的是，“跳过”按钮，放在右上角，用户体验是不够好的，右下角用户操作起来才会更便捷，改为右上角其实就是为了让用户少点击。用户不去点击“跳过”按钮，那闪屏内容曝光的时间就会更长，这符合小米商城自营平台的定位，自营平台闪屏展示都是自己平台的内容。
有很多产品闪屏的“跳过”按钮，放在右下角，如微博、网易云音乐，优先满足用户体验，是因为广告的性质不同。
“跳过”按钮在右下角的产品
在广告学中有这样几个词：CPS、CPC、CPM、CPT。
了解完常见的几种广告推广方式后，我们再看一下微博和网易云音乐两款产品。他们的广告如果是CPM（曝光量）和CPT（包时间）的推广方式，那“跳过”按钮放到右下角可以提升用户体验，还不会影响推广的收入。
再来看一下脉脉和花瓣两个产品，他们的推广方式大概率是按CPC（点击率）或CPS（转化率）收费的。闪屏的“跳过”按钮放在右上角，内容的设计形式上强调并引导用户去点击广告。
“跳过”按钮在右上角的产品
聊一下脉脉和花瓣的闪屏设计，脉脉把闪屏设计成弹窗的形式，用一种骗的形式，引导用户点击假弹窗的“知道了”或关闭图标。用户的点击行为与心里目标完全不一样，这样的设计虽然能让平台获得更多的广告收入，但也损害了用户对平台的好感。
花瓣闪屏的设计较为友好，实实在在的告诉用户这是广告，你有兴趣就点“去看看”去了解，没兴趣就等一等，或点击“跳过”。花瓣这种设计形式较为适合CPS（转化率）的推广放过，因为点击了解的用户，都是对广告兴趣的精准人群。
最后总结一下文章的内容，启动页和闪屏是两个东西，通过设计可以让用户等待的时间感知更快，从而提高体验。闪屏可以用一张图适配所有大中小手机，闪屏的“跳过”按钮大有学问，合适的设计可以让平台的收入倍增。
设计从来都是用来满足商业目的的，一个小小的按钮设计，都会很大影响到平台的收入，所以UI设计任何时候都需要清楚的了解产品定位以及商业模式，这样才能有效的产出设计。
文章来源：人人都是产品经理 作者：吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
更多精彩文章：
近日在短视频上有关「高德 AR 导航」的相关视频成为爆款，得到了广大用户的欢迎和点赞，下面就和大家一起分享，高德 AR 导航从无到有的体验设计原则和背后思考。
△ 高德 AR 导航效果
各大公司入局 AR 现实增强领域，现实增强技术也逐渐趋于成熟，随着对 AR 应用领域深入探索，图像识别数据的积累以及 AR 导航体验探索变得非常重要。高德地图基于大量的地理信息数据和精准的导航能力，AR 实景导航正式发布，让驾驶员能够身临其境的感受增强现实带来的驾驶乐趣，那么在复杂的环境中又如何把握体验设计？与界面设计又有什么不同？一直是我们在思考的课题。
我们先从用户反馈、竞品分析、AR 导航载体、安全性、环境感知、设计语言 6 个层面切入分析，把探索的方案落地到 AR 引擎中实验，再到高德地图车机版上线验证，最后服务于高德 ToB 车企出货，带来实际收益。
作为设计师，习惯了用屏幕的二维空间去思考信息效率的最大化，但是把体验和设计放在三维空间中，会受到环境、光线、安全性、场景、人、车、路等相互影响。
1. 环境影响设计
环境的变化影响分为自然环境、道路环境、驾驶环境三类，不同的天气、道路等级、驾驶因素都会对驾驶员的感受、反应、状态产生影响，所以在 AR 的空间体验设计中，这些影响需要充分考虑其中。
当考虑完环境因素后，还应该去真实的驾驶情景中分析信息呈现的权重，比如车辆在行驶中前方移动的物体一定比车辆静止时看到移动物体的权重要高，那么在设计上，需要明确信息层级和显示时机及策略，让驾驶员在行驶中能够快速获取，且正常驾驶不受其影响。
2. 空间体验设计
AR 空间体验设计最大的难点在于：在界面设计中，我们只关注信息层级、颜色、大小、动态等，都是在二维平面中去思考信息效率的最大化，但是在 AR 的三维空间中，除上述我们还需关注安全性、空间性、以及如果让驾驶员快速获取增强信息来辅助他进行平稳驾驶。从下图比较看，在界面中告诉我前方有什么路况信息远远不如直接看的效率快。
AR 导航的视域不仅要考虑水平、垂直视野中的布局，划定舒适区域，还要考虑距离对于信息呈现的感受。
经过以上对于布局的规划，我们可以得到以下布局关系。
3. 颜色及视觉权重
在颜色的选取上，让整体的配色符合真实世界的认知，在我国道路交通中对于颜色界定，路牌中的蓝绿色为不会立即影响驾驶者行为的信息，红色、橙色、黄色用户告知驾驶员暂时性和永久性的危险，所以我们可以得出以下颜色体系。
在 AR 导航设计中，最大的不同在于，你所有的设计都需要跟据实现后的策略+真实环境路测去反复调整，检验设计逻辑是否符合驾驶员的真实感知，经过了大量路测及实验才能敲定。
1. 案例分析
我们尝试用一个案例展开来诉说实际的道路环境远比纸面上的分析要复杂的多。
在司机正常驾驶中，既为用户提供了红绿灯检测，又给用户提供了车道线提示，单独看红绿灯识别及车道线提醒都没有问题，但在十字路口场景可以发现，红绿灯和车道线重合，带来了信息叠压的问题，经过分析发现：
针对上述的红绿灯和车道线重合问题，可以从两个层面分析解决。
所以迅速采取了方案 2 的方式，让红绿灯和车道线差异策略时段显示，规避了该问题，上述问题为简单举例，在实际现实空间场景时，需要注意的是现实物体识别是否遮挡驾驶视线或者和 AR 常驻信息重叠。
△ 压线效果
△ 场景服务卡片
△ 斑马线提醒及行人预警
我们试想下，如果在转弯情况下，我们展示了很多行人 ADAS（预警系统）提醒，是否影响了正常驾驶？在每个元素出现和消失的时候，需要充分的考虑到它对其他元素的影响，是否符合 AR 空间设计体系和权重策略，差异化显示为更优解。
△ 标注：本篇文章内容效果在后续版本中陆续上线
抖音、快手、snapchat 等国内外社交平台上的 AR 滤镜应用大多简单有趣，比如给你的脸上实时画个妆，拍边时四周漂浮一些可爱的小动物，非常符合现代人的使用心态。但是 AR 在地图中的应用（如步行导航、驾车导航) , 也应该考虑如何利用 AR 的特性让地图中的数据清晰易懂、与人的互动也变得更轻松随意。
常规使用导航时，随着地图放大，可以看到更多的道路细节（车道数量，路边停车位，斑马线，交通事故等）。但是开车时需要时刻和真实世界做对应。受限于屏幕大小，这些信息的展示总是有限的。当我们用上了 AR，这些信息就能直接展示在真实世界中的相应位置，不用费力去寻找。传统地图的方式也将被颠覆。
案例分析 1：放在道路上的虚拟路障
利用 AR 视觉效果进行更逼真的强警示作用，而不是导航路线上的一个简单标记。
案例分析 2：AR 导航商圈透出
开车到陌生城市时，结合 AR 地理位置标记，能清楚的知道所在商圈的信息。
2. AR 在出行领域的更多应用
随着城市建设路网越来越复杂，AR 在旅游景区的导览，多种交通工具混合出行的场景都能更好的发挥出价值。这也是今后我们探索的方向
文章来源：优设 作者：AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
更多精彩文章：
招行估计是考虑到没有配置现任经理的详情，又不想浪费标题右侧的空间，才作此设计。
其他相关：这部分包含的基金公司、基金档案、交易规则属于并列关系，理应出现的分割线却没有体现，虽不影响投资者使用但反映出UI组件规范缺乏一定逻辑性。
交易规则：在购买时间点缺少了T日（交易日）收盘时间（15:00前）提示和周历提示。页面空间是富余的，完全可以将信息曝光提高投资者的时间感知度，而不是跳转二级页面才能了解详情。
功能模块十分丰富，cover了关于一只基金的所有直接和间接描述。直接的包含了概况、行情、历史回测、持仓、经理介绍等内容，间接的包含了问答、讨论、资讯、公告等内容。
在产品的广度与深度方面，天天基金选择了把广度拉宽，将很多二级内容拍平，嵌入到一级页面中，可以说非常适合经验型投资者，但随之而来的劣势也十分明显 - 页面过长。
非常直观，天天的基金页面长度是招行（或蚂蚁）的两倍不止。
有了上面招行基金详情页的大致结构做支撑，这里就不把天天基金的页面逐个模块拆解分析了，我们挑一些有意思的来说。
基金概况：跟随涨跌变化的红/绿页头，这是天天最具标志性的设计之一，个人对此保留意见，这么大面积绿色在过去的一周，实在是令人焦虑。
净值行情/历史数据：天天基金在净值模块单列出了“单位净值”和“累计净值”的走势图，还直接标明了不同时段区间内的最高最低值。（“累计净值”是基金自成立之日起至今的净值表现，“单位净值”是基金运作期间扣除分红和份额拆分影响之后的净值表现。）
听说这是区分老基民和新人小白最直接的一道坎，当然作为一个UX设计师，我也就掺这一句，毕竟资格还远远够不上老基民。
非常贴心的一点是，天天在这添加了定投该产品的收益可视化。根据历史收益率回测和不同定投算法，进行一段时间内的收益率估算。与此类似设计的产品还有涨乐财富通。
特色数据：这也是经验投资者非常重视的三个指标。波动率反映收益率波动的程度，越小越好；夏普比率指基金每承受一点风险能够获得多少超额收益，越高越好；最大回撤指基金净值从最高到最低的降幅，越小越好。
基金持仓：这又是一个老基民的福利专区。上面分析过招行基金持仓tab的优势，而天天直接把带有重仓股盘中行情的持仓列表、资产/行业分布饼图直接嵌入到一级页面里，虽然默认只显示前五只重仓股，但对于了解相关板块行情也很有帮助。
这一模块的二级页面也支持投资者切换时间去观察基金经理每一季度的调仓风格。其实我个人更倾向于直接把十大重仓股行情全都放进来，默认折叠需要时展开。毕竟调仓不是个高频动作，我不会需要频繁地跳进二级页面去观察调仓。
基金经理：作为后台烹饪的cook，这块的简介过于“简洁”了。其实次一级的经理详情页里有非常详实的背景概述和任期间业绩回报评估，完全可以精选一些标签化的内容在一级模块里完善包装。
社交化：然后比较有意思的就是“社区”概念。天天基金上每只基金都分别有两个“bar”，一个问答吧一个贴吧，贴吧包含了问答吧。
这里能体现出天天对于细分场景的重视。贴吧里的话题天南海北，吐槽的、围观的、提问的、表态的、发小作文的、晒收益/亏损的，啥都有。
天天的产品经理还是为提问用户单独开辟了一片净土，让内容的传播与触达更加高效。
回到UI层面，天天基金页面的文本内容在逻辑结构上比较复杂，但视觉上没有将不同层级的对比度拉开，导致文本信息过于平均，不利于重点信息的快速检索。
财富号视频：视频可以展开和收起。产品还给它配置了观看人次，侧面为该基金公司和旗下基金产品做热度营销。
基金概况：除了基金相关的基本信息以外，模块内展示了晨星评级和关注人气。既有客观权威评估体系，也有用户层的氛围烘托，通过两层信任力建设占领用户心智。
信任力背书：“支付宝金选”是由支付宝理财智库、中国证券报联合推出的一套理财产品评估体系，背后有一些专家KOL背书。能够筛选出部分历史业绩表现优异、基金经理业绩突出的产品。
相比于前几个信任力的营造，这一点的重要性和优先级远远胜出。因此在视觉层面也用黑金配色体现出权威性和尊享感。
能够很明显地察觉到互金平台和金融机构在产品包装上的玩法不同：互金平台倾向于权威背书和人气营销，金融机构倾向于指标构建和数据展示。
行情/数据：这一模块增加了一个可以手动关闭的tag，是关于“风险回报比率”的描述，一个听上去类似“夏普比率”的指标。优势在于蚂蚁直接量化转译了指标的结果——“好于同类98%基金”，省去了投资者分析指标的过程。
基金经理介绍：关于这部分，虽然在基金经理介绍的二级详情页里，天天基金比蚂蚁财富要详实得多，但一级模块里蚂蚁的人物包装还是更到位。“金牛奖得主”和学历/从业背景简述能直观地提高产品在用户侧的信任力。
持仓行情：这可以说是该页面视觉创新的重头戏。蚂蚁财富由于相关个股数据缺失，并不能像招行和天天基金那样横向比对每个季度基金经理的调仓动作，对于经验投资者研判这只基金来说，少了一个观察维度。
而视觉层面的创新则显得十分取巧，原本枯燥的个股行情列表被转译为可视化的矩阵，矩形的大小和底色能直接映射该股票的持仓占比和实时行情。并且横向滑动的组件也支持在不跳转的情况下完整显示10只重仓股。
对于持有或长期关注这只基金的用户而言，除非你要分析调仓，否则是不需要频繁进入二级页面查看持仓明细的。
以及细致到小数点后两位的持仓占比，意义也不大，了解大致的配比关系即可。蚂蚁这个可视化组件在带来新颖视觉观感的同时，也解决了这一问题。
对于产品而言，信息架构往往是最容易有争议的部分。而金融产品的信息深度和业务复杂度尤为明显，与之俱来的必然是各平台在架构策略上百花齐放。
文章来源：站酷 作者：loven
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前阵子回老家的时候，在老人家里看到这样一个机器，这个机器的功能主要为家庭教育、视频通话与监控等等。
如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难，更别说老人了。
当然了，这个机器最后只被家里的老人当成，一个只会定点报时的“摆设”。
除了把字号放大，适老化设计还需要做什么？以下分享京东直播在适老化设计上的几点探索。
强化对比——看清信息
直到近几年才知道，家里的长辈喜欢发微信语音，其实是因为老花眼打字不方便。
在适老化设计中，需要注意界面中的信息与背景的对比度，是否足以让老年人清楚识别，这涉及到对色域跨度的调整。
我们通过 H（色相）S（饱和度）B（明度）的数值来划分色域。如下图，在统一H值的情况下，规定了10个标准的S、B值，从而形成一个色带。所以我们在前后景的颜色选择上，需要满足跨度至少为5 ，才能让老龄用户清晰地识别到前景信息。
比如在京东直播的老年版界面中，不仅加深了原标准版中的浅灰色文字信息，同时对一些暗文设计也进行了调整，如搜索框暗文“点击搜索主播名/商品”等内容，提升暗文明度以确保与其背景间的色域跨度大于5。
所以在适老化设计中，需要让界面中的信息与其背景间的色域跨度至少为5，才能足以让老年人看清信息。
传达共识——看懂内容
90前的人想要表示“打电话”，会用手比出6的姿势贴在耳边；而现在的00后，会用手掌当作手机的样子贴在耳边来表示…
在让老年人能够看清界面中的信息之后，我们的设计还需要有更清晰的表意信息，让他们能够看懂。其中的关键在于，这些信息是否能够“传达共识”。
无法传达共识的设计，就像00后的小孩突然摆出用手掌贴在耳边的姿势，家里的老人看了可能也无法领会到，这表示的是“打电话”的意思。
在设计中想要”传达共识”，需要尽量避免图形icon的单独出现，用纯文字或图+文的形式表达。不过除了给图标加上文字，其实我们在图标本身的设计上也可以进行适当调整。
比如同样表达“话费充值”，是用手机还是座机，哪个更能让那个年代的长辈理解？哪些事物是那个年代惯用的，哪些事物是在那之后才诞生的？哪些是我们日常生活中就存在的东西，哪些又是专属于互联网世界的产物呢？
所以在适老化设计中，除了帮界面里的所有图标加上文字以外，在图标的设计上也可以结合年代、群体环境的因素，让图形表现的是老龄年代惯用的、日常生活中固有的内容，让老年人也能轻松领会到，这表示的是什么。
联系认知——找到点击区
就算没使用过手机的人，在生活中看到凸起的事物也会忍不住按一按；但如果他们看到的是一个圆圈，就不太可能有这种反应了。
在适老化界面中，需要代入更多能够联系生活经验的认知锚点，帮助老年人顺利在界面中找到点击区域。其实不妨回想一下，即使是现在熟练使用手机的我们，也是从当时iOS4的拟物化界面，开始慢慢地培养心智，才能到如今就算看到一个线框、甚至只有纯文字，也能轻松分辨出哪里是可点击的按钮。
而当下的老人，也正像当时一开始接触智能手机的我们，需要在界面中找到与自己生活经验的对照，才能利用熟悉的事物作为认知锚点，帮助自己理解联系上一些陌生的概念。
比如将界面中可点击的区域强化投影或高光，帮助老人们联系起生活中对凹凸的认知试着去点一点。除此之外，我们还需要把一些会对点击认知产生干扰的内容进行弱化。
比如在标准版的京东直播中，存在像红包雨、奖券这种运营标签，其样式看起来与按钮很像，但实际为不可点区域，所以在老年版界面中弱化了这些标签，将他们与所在的列表内容作为一个整体背景，让视觉重心聚焦在可点击的按钮上。
所以在适老化设计中，除了需要对可点击区域强化投影以联系认知，也需要将一些不可点击的干扰项进行弱化，保证视觉重心最终落在可点击区域上。
行为指引——完成点击
美国新泽西北部一家电影院做了一个潜意识实验：在电影中每隔5秒就插入0.03秒的字幕，写着“吃爆米花”和“喝可乐”，虽然人的肉眼无法捕捉到0.03秒出现的事物但它们可以堆积成潜意识，随后当天影院的可乐销量增加15%，而爆米花则增加了58%。
在适老化设计中，我们还可以运用潜意识作为界面中的隐形向导，帮助老年人顺利完成目标行为。
比如在按钮的文案中包含行为动作、结果去向的内容，像“点击领券”中的“点击”——对当下需要完成的动作描述，“领券”——动作完成后的结果去向，让每个一眼晃过的引导效果堆积，成为界面中的隐形向导，帮助老年人了解如何完成操作。
像在京东直播的老年版界面中，也同样设计了这些隐形向导。比如在列表上加入“点击进入直播间”的按钮，引导老年人顺利了解到“我当下可以进行点击”以及“我点击后可以进入直播间”的信息。
除了对按钮文案的调整，我们还可以为一些非明确的可点击区域加上行为指引。比如在主播力荐中，每个商品图片都可点击看对应的主播讲解，因此为每个商品加上带明确行为意图的点击按钮，避免让人以为这只是一些展示图而并不知道这其实都是可以点击的。
所以在适老化设计中，可以在按钮文案中加入行为动作、结果去向的内容，同时对一些非明确的可点击区域加上行为按钮，发挥潜意识的隐形引导作用，帮助老年人顺利地完成目标行为。
以上仅展示阶段性成果，设计方式、设计理念等，我们的探索远没有结束，期待下一次分享中与你们的交流。
文章来源：站酷 作者：SDL艺术实验室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难，更别说老人了。
接下来为大家分享精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
蓝蓝设计的小编 http://www.lanlanwork.com