首页

APP最常用的9种状态设计

用心设计

一个组件做任何事情之前是怎样的?可能这是用户首次看到它。或者它还没被激活。根本上说就是这个组件存在,但还没有启动。

1LNyqFzjiRNkqw186I2_YtQ

盘点那些应该杜绝滥用的设计

用心设计

过去一段时间,有无数关于汉堡菜单的文章,大部分设计师都在抵制使用他,然而这件事的本质并非是图标的错,而是将导航隐藏在图标之下的问题。

这种设计方案对于设计师来说特别省事,根本不用担心有限的屏幕大小,只需要将你所有的菜单项排个序然后放进这个可滚动的浮层中,藏在汉堡菜单里。

然而实践证明,使用可视化的菜单项会提高用户的参与度、满意度甚至是商业利益。这也是为什么现在主流的应用都从汉堡菜单改成底部导航的可见菜单设计。

17js20151113

视觉设计如何“一稿就过”—— 谈谈最近踩过的坑

用心设计

时我的心情可以用”崩溃“来形容,我感觉在众人面前尊严全无,感觉两周的辛苦完全浪费了,感觉自己的专业能力被完全无视。团队成员的积极性也受到
了严重的打击,有人觉得何必浪费精力去探索创新,老板说啥就做啥挺好。那个时候我一度想过离职,因为我实在是不知道该怎么面对后面的事情。

索性经过一段时间,我又恢复了理智,我发现之前的方法存在严重的问题:在设计过程中缺乏老板及其他leader的参与。这么做绝不是为了迎合老板,而是对于一个to B产品来说,理解的成本非常高,不管是格局、经验,还是其他因素,设计师都 难以到达和leader同样的高度,而这个问题在C端产品上虽也存在,但不至于那么明显(C端的产品理解成本较低,大家的理解不会存在太大偏差)。比如同 样是对于大数据,我们想到的关键词是”实验、汇聚、科技、工具、安全、价值”等,而老板可能想到的是“0和1、太极、宇宙、水晶球“等等。

我们具体是怎样做的呢?当然不是直接问老板要怎样设计啦,而是采用一种”预访谈“的形式,我给它起了个名字叫”投石问路“法。

lj20151110

iOS 9人机界面指南(二):设计策略

用心设计

本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。

iOS 9人机界面指南(二):设计策略

从可用性角度重新解读设计风格的变迁史

用心设计

鉴于早期的图形化用户界面中,立体效果被大肆用在所有地方,这还包含了阴影、渐变和高光等一系列的效果,其目的是为了让用户能第一眼就识别出行动按键。然而,早期的GUI把这些伪3D效果应用得太过火了,在视觉上造成了相当的干扰,并极富侵略性。

9bph20151107

2016年设计师必须掌握的微交互知识

用心设计

何打造一款看起来非常惊艳的应用,我想大家应该有所了解,借助有趣的故事、流畅的流程和令人难忘的视觉设计就好。但是仅有这些并不够,你需要拿出一些真正能打动用户心灵,产生情感联系的东西,让他们感受到应用真正鲜活的一面。

这个时候,就需要微交互登场了。

设计师对可扩展设计工具的探索

用心设计

一旦你以编程思维开始思考设计时,你开始剖析产品的每个图形要素,这就是被称作原子设计的思维。

简单说,像字体、图片、图标或者按钮等每一个物体都称作原子。

1

优秀APP整体构图速成法

用心设计

位优秀的移动APP客户端的UI设计师,在接到一个移动case的时候,脑海中应该浮现很多相关的一点APP UI碎片。

肯定很多人会说,拥有这个功力肯定不是应届APPUI毕业生所能掌握的。25学堂的小编说,未必。只要平常我们多安装一些优秀的APP、每天来欣赏一款独特美的APP。

把这些好的APP 翻来覆去的浏览即可。

APP quick method 0

认识UI设计师

用心设计

UI 的中文名是用户界面(User interface),而我们现在使用的大多数设备界面都是图形用户界面,即 GUI(Graphical user interface)。我们通过这些可视化的图形界面来理解计算机,进行工作。

但是最初的界面可不这么友好,那时的界面还是命令行界面,CLI(Command line interface)。计算机只是被政府或大型机构使用,在普通人眼中是完全不能理解的存在。

关于Android和IOS交互上那些事

用心设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

来源:莫贝网

先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

 

1

仔细阅读MD的规范,似乎写的很清楚,但是如果和Android4.0规范放在一起,还是会发现很多有出入的地方。不过规范的目的是为了培养并迎合用户使用习惯,减少用户认知负担。文字是死的,人是活的,灵活应用才是关键。

在以MD为基础的app设计中,经常会出现以下结构(如图1)

1

在Android 4.0和material design设计规范中都专门对选项卡进行了说明,但两者的说法不同。

在Android 4.0中,选项卡tabs属于操作栏的一部分,可以很轻松探索 app 中的不同功能,或浏览不同分类的数据集,就是说tabs选项卡是可以作为导航使用的,类似于iOS的标签栏,只是iOS放在屏幕底部,安卓是放在屏幕顶端(如上图2)。

但在material design中,tabs 的作用是将大量关联的数据或者选项划分成更易理解的分组,虽然很容易让人联想到导航,但其本身并不是用来导航的。每个tab的内容应该互相关联并且是在同 一个主题下(如下图)。图中出行方式可以通过tab划分成多种方式,但是搜索、指南、设置却完全属于不同的功能导航。

1

如此看来,两种规范似乎是相互冲突的,而且只要留心一下你会发现,现在市场上经常是这两种形式都有。googel官方比较推崇应用结构是:左侧导航抽屉+应用栏+tabs(Tab可选),但是同一种结构却有两种不同表现方式。

方式一:谷歌主推形式

侧边栏导航作为应用的主导航,头屏显示应用最重要的功能或内容,如果在较低层级中有多个平行相关视图,可以用Tab结构(当然也可以没有)。这种结 构的关键是主要功能或内容很突出,所以头屏最大化显示,而其他功能相对较弱,不需要频繁切换侧边栏导航(如下图)。谷歌发布的inbox邮箱,左侧导航栏作为主导航,默认显示收件箱页面,用户最常用也最重要的功能是查看收件箱,至于其他的发件箱、垃圾邮件等都可以放在导航抽屉内收起。googel图书顶部是应用栏+tabs结构,此处Tab强调的是在同一主题下的不同归类,而不是导航。

1

方式二:市场发展

或许是受4.0规范的影响,在左侧导航抽 屉+应用栏+tabs的应用结构中,Tab作为应用的主导航,而左侧抽屉作为辅导航,收纳一些用户不常使用的功能,像用户中心、设置、反馈等。这种结构适 合那些多个相同等级的功能视图需要频繁切换的app,且只需要手指左右滑动就能快速切换Tab视图,这将大大提高应用使用效率。如下图所示,虽然是概念设计(主要是国内安卓应用喜欢延续iOS风格,将Tab放在屏幕底部,米找到合适的例子,且MD没有被普遍应用),但很适合该场景下的示例。这款产品类似于微信,将主要功能导航放在顶部,实现快速切换,侧边抽屉导航放置收藏、状态、设置等次要功能。

2

以上两种方式并不冲突,关键是看你应用的功能内容。如果你的应用核心功能很突出,且不需要其他功能频繁切换,就选择第一种;如果你的应用有两个或者两个以上相同重要的功能模块,且需要频繁切换,比如微信的即时聊天和朋友圈,那就尝试第二种。

Android部分暂时就到这里,来看看iOS。如果展开来讲,体系太庞大,暂且用一张图表示,虽然都是很基础的内容。

 

1

另外,Android和IOS很明显的差异是层级返回和编辑选择。

1、层级返回

IOS平台没有实体返回按键,所以涉及层级间的导航,app界面本身一定要有返回按钮,而实体home键只负责应用退出。Android平台有物理 返回按键,且点击返回的是动作流。比如,在搜索界面,点击搜索框调出软键盘,再点返回按键,不是返回上一页,而是收回弹出的软键盘,它强调的是返回上一个 动作的界面,而非层级关系。在Android平台上的app,如果应用本身含有返回按钮,返回的是上一层级,设计的是层级间的导航。另外,在安卓app的首页点击返回按键,就是退出应用。可看如下关系图

1

2、编辑选择

对于编辑选择功能,IOS有明确的入口,通常在导航栏 上有编辑按钮,点击后进入编辑模式,通常可以多选,同时底部或顶部会增加工具栏,用来处理多选内容。当然也可以单选删除,通过点按向左滑动删除,或者是点 击按钮从底部呼出操作菜单,逐个删除。但Android是通过长安方式进入编辑模式,此时操作栏被一个临时情景操作栏覆盖(情景操作栏可以覆盖顶部操作栏 和底部操作栏),界面内容允许单个或多个操作(如下图)

1

以上部分其实都是一些平台规范总结,将区别大且重要部分整理出来,也是为了方便阅读查看,后期会持续更新一些其他交互内容。

作者:butter
来源:jianshu

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档