弹性化设计-设计框架的包容与扩展性

原创文章 分类: 经验/观点 版权:
3303 8 7 0
更新于:2016-10-31
0.0
编辑推荐


概念


“弹性”一词源自力学,指物体在外界因素作用下发生运动和形变,当外力撤销后能恢复原来大小和形状的性质,叫做弹性。


将“弹性”引申至互联网产品设计领域,则强调了设计框架及界面结构的包容与扩展性,具体体现在框架的搭建对后期的变化改动及功能增加是否可适应,即将时间因素纳入考虑,以发展的眼光设计框架结构及信息布局。


具有良好可扩展性的系统设计,则需对空间规划与功能布局把握适度弹性与灵活,便于后期对框架的改造和再利用,以适应未来一段时间内变化需求。


常用的设计方法


1,模块化

对整个画面进行区域划分,不同的模块承载不同功能及内容,根据需求及变化,对相应的模块进行调整和改动,以达到减少对其他模块的影响,进而减缓整个画面的变动。

模块化

模块化在内容更新快、业务推广频繁的应用中发挥的价值不言而喻,像电商、视频、新闻等,例如优酷pad版上方的子标签页,可以根据当前事件添加不同的模块专题,像“新好声音”、“里约奥运(现已去除)”等,在已有的框架内,很好的满足了业务需求。

优酷pad版


标签页,是一种常用的信息内容的扩展方式。所有的标签本质上平行或同等级的关系,因此可以根据新增内容的性质来判断是否需要标签的新增。

PC端的软件中,使用场景非常广泛,且信息组织清晰明了。

标签页

在移动端,演化为我们现在常见的tab bar(标签选项卡)、segmented control(分段控件)、scope bar(范围栏)等

移动端标签栏中的标签选项最多为5个(具体详见IOS Human Interface Guidelines),若有更多的标签,标签栏会显示其中4个并增加一个“更多”标签,再将其他标签以列表的形式呈现,例如美团APP。

美团APP


列表可用作导航及分类,主要分为平铺型和分组型,特点就是“占地小、放得多、易组织”。

列表菜单


2、“物以类聚”

对相同性质的选项或功能聚合在单个功能键上,例如筛选和搜索等。聚合的区域内有更多的可变性及扩展能力而不影响原有框架布局。

zendesk中的高级搜索,就集合在单个控件内,而不影响整个界面结构,即使后期搜索选项发生改动,也不影响现有的布局。

zendesk

salesforce中使用场景更加广泛,使复杂的功能的也可以简单有条理的呈现

salesforce

这种方式操作相对隐藏,功能层级较深,部分可采用鼠标移到该操作区域即可展开。


3、自适应

自适应也是很好的体现弹性化设计,可应对多种设备和分辨率。

自适应

最优的方式是做到响应式,则需要考虑屏幕分辨率断点和栅格系统。


弹性设计思想是一种应对需求变化的策略,贯穿与常规设计过程之中,将时间因素纳入考虑。当然,任何物体都有一定的弹性空间,当现有的框架无法继续承载产品发展,大的体系建立便将再次发生。


在我的设计中,将来是十分重要的,我用今天的材料和方法进行设计,但我设计的建筑物将在明天使用和改造–––西萨·佩里


欢迎关注微信公共号:int-PD


微信公共号:int-PD




Wiiii

微信公共号:int-PD

976粉丝/0关注

老马识途小有名气首页达人收藏家lv.3
开始设计的 3 条建议如何构建 SaaS 网站

Wiiii

Wiiii

微信公共号:int-PD

老马识途小有名气首页达人收藏家lv.3

扫描二维码
去手机端查看海报

Wiiii

TA已经获得8枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN