首页

在iPhone的UI设计背后,是一场关于注意力的战争 2018/09/06in 设计文章 & 教程评论区

资深UI设计者

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

iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。从某种意义上来说,iPhone 的创造是开创性的,也是不可替代的。而我们也不约而同地发现,以iPhone 为标竿而创造的智能手机和数字化的交互界面,让我们处于一个时刻都会被分心的境地。

令人上瘾的数字内容,让我们一刻都离不开智能手机,从某种意义上,它彻底改变了我们的生活,工作,甚至思考的方式。现如今,越来越多的人开始尝试戒除令人上瘾的智能手机,寻找更加健康自由的人机关系。根据今天的调研,过度使用智能手机,确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初,直到10年后的现在,在数字产品上瘾和用户注意力的控制这件事情上,开发团队本身就没有放松过。这次,Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司,并且很快就出任了公司的人机交互界面组的设计总监,在2006年前后,他也是作为 iPhone 项目核心的6人团的一员,加入到项目当中来。

待在苹果的20多年时间里,他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计,直到他开始追求创造属于自己的公司和事业,才正式从苹果离职。也正是因为这样的契机,才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去,以及他留给苹果的那些遗产。

和许多设计师一样,他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息,他现在依然还不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型设计阶段,他就已经意识到了,这款产品最大的缺陷之一,就是它注定会分散甚至垄断用户的注意力。而与此同时,苹果也有意识的没有给予用户,对于iPhone 完全的控制权。下面,是访谈中能够对外公布的几个重要的内容摘录:

设计「请勿打扰」的功能

「我认为,从某种意义上来说,真正洞悉设计的设计师,大都能够预见到手机对于注意力的影响。在使用手机的时候,我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候,当我刚刚开始制作 iPhone 的原型之时,管束还不是那么多,我们当中有几个人还有幸把原型机带回家,这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系,iPhone 几乎隔一会儿就会亮一下,显示有新消息,叮叮咚咚响个不停,于是我意识到,和我们朝夕相处的手机需要一个管控功能。所以,在很早的阶段,我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事,苹果的内部产生了分歧

「其实,在苹果公司内部,想要大家都理解分心是一个影响用户生活的问题,还挺难的。乔布斯倒是很能理解的,但是公司内其他的同事,对于用户对于手机的控制权多少,其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权,不过这个事情对产品的营销和市场运作是有影响的。所以,当时内部也有声音说,如果真的给用户太多的控制权,那么这款手机就不酷了。」

「其实直到今天,iPhone 当中绝大多数的功能都是可控的,但是其中很多功能隐藏的比较深,彻底的掌控它们是比较困难的,如果你真得想让那些整天都在轰炸你的信息彻底远离,你需要花费很长的时间来摸索,用独特的方式逐个调整或者关闭才行。因此,对于那些熟练使用iPhone 的重度用户而言,确实是可以如臂使指地掌控这台设备,但是对于更换壁纸都不太会的用户,想要搞清楚iPhone ,让它如意随心,真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用,然后你不停地会收到提醒和通知,是否要授权使用相机,是否要授权获取你的位置,是否允许它给你发送通知,每个都要做决定。稍后,你可能会发现,Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了,总会有信息大半夜地推送到你的眼前,让你无法安生地休息。实际上,借助请勿打扰的功能,你可以一早上再查看它们。这套系统足够智能,能够判断出哪些应用之前就已经获得了许可,哪些仍然在后台获取数据,哪些通知实际上你并不关心。所以,这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系,手机会询问用户,你真的需要这些通知吗?或者是,你真的需要Facebook 使用你的电话簿的信息吗(因为你已经很久没有登录了)?等等。正确地设计了这套系统之后,提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情?

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量,它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨,而媒体和用户都发文吐槽,在呼声和压力之下,它们最终在iOS 12 中呈现了出来。这个局面之下,苹果没有选择的余地,必须对于舆论有回应。这对于每个人都是好事,因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品?当然算不上,因为现在的iOS系统是为了应对舆论和负面新闻而设计的,设计的意图并不对。如果是苹果主动作出这样的决策,才算得上是好产品。」

「对于苹果这种体量的大公司而言,产品设计其实复杂性非常的高。真的是这样。作为设计师,你需要服务于你的用户,你还得和公司的利益保持一致,同时,还需要对得起自己的底线和道德。服务于一个大型的企业,确实非常的难做抉择。对于用户而言,可以很轻松的直接怼苹果,说它没有做对的事情。但是身为其中的设计师,要平衡各方面的需求也压力,经常会进退维谷。有些用户因为iPhone 的一些功能,受到了负面的影响,有些人受到的影响比另一部分人更多。但是身为设计师,一个受到各方面制衡的设计师,即使是作出了改变,在很多时候也远远不够。至少在我看来,现在的改变还不够大。」

管理数字化的生活,就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起,我就用着黑色的壁纸。我不会将一大堆的东西塞进手机,减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要,或者说我推荐这么做,对于人和手机之间的关系,每个人都不一样,处理方式也都很个人。对于如何处理自己和手机之间的关系,有人让我提一些建议,我觉得没有必要,因为我的办法并不适合所有人。一天喝多少咖啡,抽几包烟,每个人的情况都不一样,没法一概而论。不过,心理健康是一件大事,你和你的智能设备之间,应该保持着平等的关系。这至少是一个大的设计趋势,是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样,你无法忽视认知压力的存在,认知设计也势在必行。」

界面设计的未来,以及不可避免的问题

「我观察到,界面设计在很自然地进化和发展着,从按钮到旋钮,从点击到手势操作,从语音交互到情感化设计,均是如此。无论是考虑到用户的情感诉求,还是进入语音交互的领域,都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题,点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互,都一定都会遭遇不自然的状况和问题,就这么简单。身为设计师,需要足够的预见性,才能真正领先于用户,预测到可能会遭遇的问题。」

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

 

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式

seo达人

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

前言

  • 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等。
  • 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。
  • 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以留言哦),一旦动态添加就会出现显示数据为Empty,我表格原本是有数据的,但是一用这个插件就把数据变成Empty了,这可不是我想要的,所以笔者就自行解决了这个问题。

对比网上的例子

  • 比如以下这种数据不是Empty的例子,但是是由于在html中写死了数据(awesome),不适合动态添加。
<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $(function(){ $('#username').editable({
        url: '/post',
        title: 'Enter username' });
}); </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 另外一种就是使用bootstrap table动态添加的,但是select类型就会出现数据为Empty的情况。
$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        },
        data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ]
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

结果图如下:

这里写图片描述

由于开源,很快就找到原因,由于formatter我们没有写这个function导致调用的默认的formatter,默认的没有把表格的值传入html中,bootstrap-table-editable.js源码如下,初始定义_dont_edit_formatter为false,我们没有实现noeditFormatter的function就会执行第二个if语句,其中的标签中没有对内容赋值,导致最后显示结果为它默认的Empty:

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) {
                    _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

由于要实现多样式,则把上面的代码改变,并在使用的时候实现noeditFormatter:function(value){…}就是了。将上面的代码改为如下(此为我自己改的,你可以根据自己的需要做修改):

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){
                        process.class = '';
                    } if(!process.hasOwnProperty('style')){
                        process.style = '';
                    }
                    _dont_edit_formatter = ['<a href="javascript:void(0)"', ' data-name="'+process.filed+'"', ' data-pk="1"', ' data-value="' + process.value + '"', ' class="'+process.class+'" style="'+process.style+'"', '>' + process.value + '</a>' ].join('');
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + value + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

结果如下:

这里写图片描述

这里写图片描述

然后是bootstrap table的使用js文件,在其中实现noeditFormatter函数。返回的result必须包含filed和value,class和style可以不需要,class可以额外用其它插件之类,比如badge,style是增加样式(背景,颜色,字体等)。

$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        }, //      onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发 //          if(reason === 'save') { //              var $td = $el.closest('tr').children(); //          //    $td.eq(-1).html((row.price*row.number).toFixed(2)); //          //    $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动 //          } else if(reason === 'nochange') { //              $el.closest('tr').next().find('.editable').editable('show'); //          } //      }, data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }, {
            id: 7,
            name: '马达',
            sex: '男',
            time: '2017-08-09' }, {
            id: 8,
            name: '赵小雪',
            sex: '女',
            time: '2017-08-09' }, {
            id: 9,
            name: '薛文泉',
            sex: '男',
            time: '2017-08-09' }, {
            id: 10,
            name: '丁建',
            sex: '男',
            time: '2017-08-09' }, {
            id: 11,
            name: '王丽',
            sex: '女',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ],
                noeditFormatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 },
                noeditFormatter: function (value,row,index) { var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143

关于bootstrap table的导出及使用可以看我另外一篇博客

下载和引用

下载x-editable,并如下引用。

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script> <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>
    
  • 1
  • 2
  • 3

然后讲上诉的一些文件修改添加,就完成了。

另外项目的结果展示

这里写图片描述

这里写图片描述

其中的样式都是自行在x-editable的基础上添加的。如配置出问题,以下是源码链接。

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


看看苹果App Store 10年来那些应用设计演变引领的潮流

博博

看看苹果App Store 10年来那些应用设计演变引领的潮流

UI巴巴 2018-07-17 21:53:05

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


很少有创新的事物能像手机应用一样在改变我们的生活方式,让我们与周围的世界互动。最开始的那500个开发者很幸运的有机会为未来数百万个应用程序提供设计方向和交互方式,为了庆祝App Store成立10周年,让我们来研究一下10个原创的App Store应用程序的界面设计演变。

一、应用程序

关于应用程序这部分,我们关注的10款应用到今天为止都还能下载的,有些近几天都还在更新。虽然很多应用提供了iPad版,但是这次我们主要研究iphone版的界面设计的变化。

1,iTunes Remote

Apple通过在App Store上发布一些自己的软件,为其他开发人员树立了榜样。Apple最初创建的应用有两个:Texas Hold'em(德州扑克游戏)和Remote,Texas Hold'em在2011年下架了。而Remote今天还在,Remote是一个简单实用的应用,通过Wi-Fi控制Mac或Apple TV的iTunes库的播放。

看看苹果App Store 10年来那些应用设计演变引领的潮流

从一开始,Remote的设计就受到iPhone iPod应用程序(今天称为音乐)的界面和感觉的影响很大。事实上,正在播放的视图在界面上基本相同。2.0版带来了由Louie Mantia设计的新图标。这两个应用程序从iOS 6开始,变得不一样,图标再次更新以匹配Mac上iTunes 11的设计风格。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Remote 的一次全新设计发生在iOS 7,与音乐应用程序的鲜明白色主题不同,Remote采用了深色的模糊背景。并与专辑封面的颜色融合。2016年,Apple发布了针对第4代Apple TV 的Apple TV Remote应用程序,这是改变似乎要取代Remote。但不久之后,Remote被重命名为iTunes Remote,该应用程序一直保持原来的界面继续可供下载,直到今年6月,Remote才更新了全新设计并支持iPhone X。

2,Facebook

看看苹果App Store 10年来那些应用设计演变引领的潮流

与iTunes Remote的更新相比,Facebook在过去时间不断改进设计,而且修改的频率越来越高,算上小修小补,Facebook都可以出书了。我们选了其中比较重大的8个变化。

Facebook在2017年10月就开始在iPhone上使用了,那时候是作为网页版应用。如果不显示顶部的蓝色导航,App Store中Facebook 1.0版几乎无法识别。而且图标是用人物头像,而不是标志性的“f”。底部导航为:主页,个人资料,朋友,聊天和收件箱。2.0版基于相同的设计概念,在主标题栏下添加了二级导航。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Facebook 3.0于2009年7月首次亮相,并推出了3×3网格图标,以帮助解决应用程序的气球导航问题。早期的屏幕截图显示了一个完全蓝色的平铺网格,但这个设计从未在应用程序的公共版本中发布。

2011年10月,Facebook 4.0 采用了汉堡包导航。在第4版之后,Facebook的设计更新变得更频繁了。应用程序的界面开始更快地迭代,并且设计的修改通常是逐步推出而不是推倒重来。

2013年4月,Facebook在iOS应用程序中使用“Chat Heads ”,允许用户一边爪机一边聊天。

Facebook的设计挑战主要来自其亿级别的用户基数。与许多小型应用程序不同,Facebook必须在各平台上为大量的用户提供一致的体验,而不仅仅是苹果的设备上。2017年8月的更新尝试统一 iOS,Android和网络上的新闻Feed 设计,其评论样式看起来更像是Messenger对话设计。

3,Things

看看苹果App Store 10年来那些应用设计演变引领的潮流

Things原来上Mac上的任务管理工具,所以有机会率先在iOS上出现。开发人员Cultured Code称,iOS的应用只用了1个月就开发完成,完成了一项不可能的任务。

Things 1.0 不能与Mac同步,而且不能标记。下图是早期的设计草图。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年发布的2.0版本是比较大的一次更新。背景变得更干净了。图标也更小巧精致有个性。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2014年的2.5版本,设计变得扁平化,颜色更浅。2017年5月发布的应用是界面上最大的一个变化。布局差不多,但是图标和ui元素都重新设计。设计师Cultured Code特别强调了如何使用动画为应用程序提供全新的感觉。重新设计的应用获得了2017年Apple设计奖。

4,OmniFocus

看看苹果App Store 10年来那些应用设计演变引领的潮流

App Store从一开始就提供了很多任务管理类的应用,来自Omni公司的Things和OmniFocus是两个重量级应用。虽然两个功能类似,但是两个应用的界面设计发展轨迹却各有千秋。

OmniFocus for iPhone最初使用简单的桌面视图和自定义底部导航,赢得了2008年Apple设计奖。Omni Group在2010年6月为iPhone 4 重新设计了高清图标。而2011年6月开始,界面发生了重大变化,头部多了一个日期选择。2013年针对iOS 7的推出,设计的界面变得扁平化。新的设计依赖颜色来提升空间感。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2015年春季的app 图标更新使用了黑色的“☑️”。从2012年开始,每个图标都包含了彩蛋。图标放大,您会注意到碳纤维纹理实际上是由微小的重复Omni徽标组成。

5,Evernote

看看苹果App Store 10年来那些应用设计演变引领的潮流

Evernote的发展代表了很多软件自2008年以来的设计趋势。Evernote原来是在电脑端出现的,App Store推出之后,Evernote更为识别性高的大象图标。

像许多早期的iPhone应用程序一样,Evernote 1.0严重依赖于UIKit,大量使用高光效果。2011年重新设计了标签栏,按时间顺序排列笔记。Evernote在2012年推出了针对iPhone 5的新界面,但是仍然使用默认的iOS UI元素。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年11月,Evernote 5推出了全新的界面设计。采用了卡片式的展示方式。浮雕效果,阴影效果的运用看上去更有深度。

2013年开始,Evernote 全面拥抱扁平化设计。每个纹理,阴影和斜角都消失了。一个明亮的从左到右的渐变条纹的导航栏设计,与新的无纹理图标上使用的颜色相匹配。2017年开始,设计又进一步极简化。白色的头部导航,黑色的底部标签栏。

6,eBay

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

eBay的设计可以说是这篇文章中10个应用程序中最引人注目的转变。在WWDC 2008上,eBay特别的登台展示。但与今天的app相比,最初的版本是相当的简陋。2009年11月,整个界面的背景换成了灰色。

一年后的2.0版本才是真正的设计,也为未来几年的设计奠定了基础。

2013年的设计像是重新披了一件外衣,而用户体验跟以前保持一致。

每个版本的变化都反映了整个时代快速变化的设计趋势,设计品味。

2015年9月,eBay 4.0 打破了常规。大多数应用程序的功能都放在汉堡包菜单下面,只留下顶部的三个标签:“活动,商店,销售。”然后这个设计很快没有继续了,2016年,ebay又重新恢复了原来的布局方式。如今的布局与2010年相比,又更加类似了。

7,Twitterrific

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

在App Store宣布之前,Craig Hockenberry和The Iconfactory为iPhone 设计了第一个 Twitter客户端。应用是放在越狱市场的。

App Store上的Twitterrific 1.0从越狱版上借鉴了一些设计元素。它获得了2008年的Apple设计奖。Twitterrific也是最早使用如今越来越流行的深色主题的应用程序之一 。但Twitterrific的设计故事更多地讲述了Twitter作为服务的历史,而不是设计趋势。每次更新都反映了Twitter平台的特性和功能的变化。在早期,这些功能通常由第三方自己开创的。

2012年,Twitterrific 5.0将所有导航移动到顶部,并使用完全自定义的UI元素。类似的布局一直持续到今天。就像应用程序的设计一样迷人,Twitterrific的图标使用了现代化的鸟类图像,而且从一开始到现在,基本上没有什么变化。

8,Instapaper

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

一个专门为阅读而设计的应用应该优先考虑内容而不是浏览器,因此Instapaper的设计从一开始就是非常自然简单的。但是,由于iOS本身的变化,应用也在外观上又一些变化。导航栏和按钮样式在iOS 6和7中都进行了更改。

9,PCalc

看看苹果App Store 10年来那些应用设计演变引领的潮流

PCalc的故事从App Store推出的前10年就开始了,开发人员James Thomson 于1992年为Mac 发布了应用程序,并一直延续至今。PCalc从一开始在iOS运行就是完全自定义的界面,并且有很多自定义的选项。

用于iPhone的PCalc 的第一个版本是从Mac仪表盘小部件移植而来。有光泽的按钮和深蓝色LCD面板与应用程序的图标相匹配。在2008年12月,一个名为Twilight的热门主题添加了更加详细的图形和类似于默认iOS计算器的配色方案。Twilight后来更新了视网膜并支持更大的显示屏。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2013年,PCalc采用了名为“Samurai”的新默认主题和图标,适配iOS 7的扁平设计。PCalc的图标在2016年3月再次更新。自iOS 10.3发布以来,Apple已允许第三方应用程序动态更改其应用程序图标,而无需向商店提交新版本。PCalc于2017年5月开始充分利用该功能,推出了各种各样的备用图标供您选择。

10,Yelp

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

与Facebook一样,Yelp的iPhone界面多年来发生了重大变化,但由于使用了一致的导航栏颜色,因此品牌识别度非常高。由于与Apple Maps的深度集成,该应用程序越来越受欢迎。

2009年8月,Yelp将一个基本的增强现实界面隐藏在iPhone应用程序中,用于定位您周围的企业。虽然它当时只是一个新奇事物,但鉴于ARKit应用程序的兴起,这一功能在今天仍然具有先见之明。

2010年1月,Yelp主屏幕推出了 3×3网格快捷菜单。界面在风格上不断完善,直到整个应用程序在2013年10月重新设计,界面更加扁平,更加突出“附近”标签。

Yelp的更新通过显示与您相关的附近的内容,展示更多基于地理位置的内容。

二、图标

看看苹果App Store 10年来那些应用设计演变引领的潮流

比较所有上面列举的10个应用的图标迭代。在过去十年中,一些图标保持相当一致,只进行了细微的改进,其他图标每隔几年就重新设计一次。

在App Store推出时,高光的图标设计占统治地位。随着设计师和开发人员逐渐建立了图标设计规范和多年来的实践经验,细节和更多色彩的运用已经悄悄出现在许多图标中。

三、个性

看看苹果App Store 10年来那些应用设计演变引领的潮流

早期的iPhone应用进入的是一个未知的世界,除了苹果公司自己的小型股票应用外,应用的界面和交互方式没有先入为主的观念,设计师和开发人员可以完全自由地进行实验。

尽管如此,许多早期的应用看起来感觉非常相似,因为用户和开发者都在互相测试。早期的反馈和反复试验很快就会影响每个应用的发展方式。然而几年内,大多数应用都找到了自己的方式,并开发出独特的风格和个性。随着硬件功能的改进,设计差异逐渐从静态图形转变为动画和动态界面。

在iOS 7引入的设计规范将设计人员和开发人员又重新拉回来,许多应用开始通过感官体验选择来区分自己,而不仅仅是界面设计的不一样。所以用户体验的重要性导致近年来用户体验(UX)设计的普及。

四、未来10年

2008年,谁也无法准确预测App Store会发展到如今的繁荣。创新源于创新,iPhone用户的品味和习惯塑造了开发人员不断的创新。

可以说,未来是不可预测的,即将推出的iPhone和iOS版本肯定会以不可预见的方式改变应用的格局。一个新的设计趋势明天将席卷全球。即使在10年后,未来也是令人兴奋的。


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



还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

博博

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

UI巴巴 2018-08-09 20:34:25


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

图表是显示大量信息的一种重要表达方式,良好的图表设计能够传达复杂的统计数据,并让用户易于理解。图表设计可以专门分出一个设计类别:信息图设计。

不过,信息图设计更多针对桌面端,很少考虑移动端,所以,移动端的图表设计挑战性更大。在小的屏幕上展示数据或信息,只能做一些取舍。

Android - 统计数据图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Arco的图表和图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

股票应用设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Analytics(分析)

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动仪表盘

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

优化 - 统计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动UI中的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

金融应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

财经和新闻应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

支付帐单

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

线图页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

健康应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

自行车比赛

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

威胁仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

足迹App

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

管理模块

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

紫色的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

运动追踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

关于铁的图

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Noblyn App重新设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

投资平台

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

跟踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……


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

你知道设计风格里的“等距风格”是啥怎么画不?

博博

你知道设计风格里的“等距风格”是啥怎么画不?

UI巴巴 2018-08-16 20:26:18

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

1.等距是什么?

等距视图是指,绘制物体时每一边的长度都按绘图比例缩放,而物体上所有平行线在绘制时仍保持平行的一种显示方法。

最早是出现在电脑应用程式的图像,以及早期的8位元电子游戏,近几年来的被广泛的使用在因特网、GUI(Graphic User Interface)以及行动游戏等等。

2.等距视图游戏的历史

虽然计算机游戏的历史一直在20世纪70年代初期就看到了一些真正的3D游戏,但是第一个使用上述意义上的等距投影的不同视觉风格的视频游戏是20世纪80年代初的街机游戏。

1)20世纪80年代 

你知道设计风格里的“等距风格”是啥怎么画不?

高速公路遇袭(1985年)

等距视图是一种把2D游戏伪装为3D游戏的显示方法。使用这种方法的游戏有时候会被称作伪3D或2.5D

你知道设计风格里的“等距风格”是啥怎么画不?

蝙蝠侠(1986年)

执行等距视图的方法有很多,但为了简化,最有效最常用的一种——贴图法。从上面两张图可以看出,其上覆盖的菱形网格把地形划分贴图。

2)20世纪90年代 

你知道设计风格里的“等距风格”是啥怎么画不?

最终幻想III(1997)

你知道设计风格里的“等距风格”是啥怎么画不?

文明六世(2016)

在贴图法中,各个视觉元素都被切分为更小的部件,称为“贴图”,都是标准尺寸的。根据预先确定的平面数据——通常是2D数组,这些贴图被组织成游戏世界。

3)目前,2000

你知道设计风格里的“等距风格”是啥怎么画不?

SOCIOBALL(2015)

你知道设计风格里的“等距风格”是啥怎么画不?

纪念碑谷 (2016)

3.等距风格的图标、插画及应用范围

这种插画有一个专门的名字叫“isometric”。

应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

你知道设计风格里的“等距风格”是啥怎么画不?

图标

你知道设计风格里的“等距风格”是啥怎么画不?

字体

你知道设计风格里的“等距风格”是啥怎么画不?

插画

你知道设计风格里的“等距风格”是啥怎么画不?

海报

你知道设计风格里的“等距风格”是啥怎么画不?

启动页

4.常用绘制软件

目前常用的软件有PS、AI、C4D。

5.干货来啦~

虽然PS/AI都能画出等距图标,但是现在有一个软件Affinity Designer 比它们画等距图更加轻松。

你知道设计风格里的“等距风格”是啥怎么画不?

首先画等距我们需要画参考线,PS/AI都能画出来,但是方法还是稍稍显得复杂了一点,一些基本功不到位的同学会很头疼这个参考线的画法。Affinity Designer 的网格和轴管理器十分人性化的解决了这个问题。

不但对于新手来说是个不错的选择,而且它完美的融合了Adobe和sketch两个原本不相融的软件。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

网格类型选择等轴测,这样网格就会自动生成等距所需要的斜线。

并且它的网格还可以设置吸附功能,也就是画的每个元素都可以自动吸附在网格边缘。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

另外它还有一个十分便捷的功能,它的图形变形功能也十分强大。鼠标移动到矩形中间节点的会出现上下重叠的箭头(→),如下图:

你知道设计风格里的“等距风格”是啥怎么画不?

这样可以十分轻松的倾斜矩形到任意角度,并且还自动吸附到网格上了。

你知道设计风格里的“等距风格”是啥怎么画不?

拖拽矩形长宽的时候也是根据网格的路径来,不会影响矩形倾斜的角度。

你知道设计风格里的“等距风格”是啥怎么画不?

轻轻松松画一个小icon。

Affinity Designer这个软件目前只适用于苹果操作系统,在App Store商店里有售卖。

案例鉴赏:

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

↑软件:C4D、3D-MAX、MAYA等大部分3D软件

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


干货:看看国际大厂是如何创建UI组件设计规范?

博博

干货:看看国际大厂是如何创建UI组件设计规范?

UI巴巴 2018-08-20 20:31:25

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

通过本文,你将学习到 Uber ,Pinterest ,Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范 。

干货:看看国际大厂是如何创建UI组件设计规范?

Airbnb通过react-sketchapp将设计与开发之间的组件协作提升到了一个新的水平

在产品中创建和保持UI和UX的一致性,可以带给用户直观的导航体验,并引导他们成功地与应用的不同部分进行交互,而不会产生混淆。

在产品的各个部分和应用之间保持用户界面的一致性,可以创造更有价值的东西——品牌。将用户体验和用户界面品牌化的关键是让用户在与新产品互动时也能感到“宾至如归”,从而提高他们对新产品的的忠诚度和满意度。

那么,如何才能构建有效的UI组件设计规范呢?以下有几个方面需要引起注意。

1、保持视觉和功能一致性

干货:看看国际大厂是如何创建UI组件设计规范?

功能一致性使你的产品更具可预测性。用户能够预测元素的行为方式,这样即使在第一次访问的页面/屏幕上与之交互,他们也能感觉到安全和舒适。

视觉一致性包括UI的颜色,字体,大小,位置和其他视觉方面,它能帮助用户识别UI元素并归类。例如,某种字体颜色可以策略性地用于帮助用户明白他们按下特定按钮时会得到什么。

鉴于目前的行业情况, UI组件还可以作为用户体验组件 ,将功能和视觉一致性结合起来。

基于组件的设计规范可以使应用程序具有视觉和功能上的一致性,这有助于用户感到宾至如归,并能够轻松地得到指导以完成与产品的所需交互。

2、为什么需要组件设计规范?

组件是用于UI设计和开发的一种很好的办法,使用较少的可重用的组件,更好地实现一致性。

干货:看看国际大厂是如何创建UI组件设计规范?

Uber , Pinterest , Airbnb , Walmart ,Atlasssian等公司都通过基于组件的设计规范实现UI的一致性。

Airbnb的设计工作室在构建他们的设计规范时坚持了这种理念:“ 我们的设计应该是统一的平台,通过定义明确和可重用的组件来提率”。

以下是使用组件设计规范的一些优势:

1. 它的可重用性促进了UI和UX的一致,因为组件可以在任何被使用的地方创建一致的体验。

2. 因为较大的组件由较小的组件组成,因此可以利用原子设计概念实现更好的一致性,从而减少意外的和分离的体验。

3. 组件在设计和开发之间提供更好的协作,允许设计语言随着时间变化而发展。在理想情况下,你在Sketch上看到的是使用React构建的内容。

4. 从设计方面来看,如字体,排版,主色调和副色调仍然可以指定为组件设计规范的一部分。

3、建立一致的设计系统

干货:看看国际大厂是如何创建UI组件设计规范?

目前来看,设计规范确实有很多优势。但是,如何才能真正地创建基于组件的设计规范,使设计人员和开发人员可以利用该规范进行协作?

在创建基于组件的设计规范前,你必须了解它是什么。UI设计规范不仅仅是一个组件库,也不仅仅只是组件的颜色,它包括很多方面。对于构成整个产品体验的基本部分而言,它是一个不断增长且不断演变的真实来源。

因此,在制作第一个组件设计规范之前,你必须设置样式指南和设计语言来控制这些组件。

然后,将这些组件的设计原理转化为代码来实现,一步步从较小的原子再到较大的组成部分。

最理想做法的是将所有组件都应该放在一个设计人员和开发人员都可以访问的位置。通过这种方式,设计人员可以监控随着时间的推移而发展的设计语言,而开发人员也可以选择并使用正确的组件。

4、共享组件库

Shopify使用Polaris设计系统,该设计系统包含一个内部反应组件库,旨在为使用Shopify的商家创建更一致的体验。Airbnb使用共享组件库为其生产率带来了巨大飞跃。

干货:看看国际大厂是如何创建UI组件设计规范?
干货:看看国际大厂是如何创建UI组件设计规范?

Pinterest使用格式塔(Gestalt),一个React UI组件库。它“强化了Pinterest的设计语言。通过执行一系列基本的UI组件来简化设计人员和开发人员之间的沟通......“

通过以上的实例不难看出,共享组件库是实现UI一致性的有效的工具。 在我看来,这种一致性不应该被强制执行,而是自然地实现。

组件库基本上是一种在团队构建应用程序时执行一系列UI组件的方法。但是,开发人员不仅局限于库的视觉语言,还局限于库的持续开发。

干货:看看国际大厂是如何创建UI组件设计规范?

当特定应用程序的特定部分需要某个组件时,它可能需要一些调整和修改。设计师和开发人员应该在灵活性和一致性之间找到适当的平衡点。

共享库经常会打破这种平衡并减慢开发速度,这反过来又会影响开发团队对库本身的采用。在任何需要单个组件的地方强制使用一个庞大的库也是没有意义的(关于这个问题我们不要陷入争论不休的辩论了)。

要想实现设计人员与开发人员之间的协作,还必须为组件维护一个实时文档站点,并以某种方式使其可供设计人员和开发人员编辑(Airbnb的react-sketchapp和Figma等工具可以提供帮助)。

这里有23个常用的React UI库,点击即可使用。如果你实现了自己的库,请记住为开发人员留下足够的设计空间,从而保持两者之间的平衡。

5、Bit -作为构建块的组件

Bit是构建组件库的新趋势。

通过使用Bit,你可以组织来自云上不同项目的组件,而无需重构这些项目或现有库。

每个组件都可以正在进行的任何项目中发现,使用或开发,同时可以轻松地跨代码库进行同步更改。

干货:看看国际大厂是如何创建UI组件设计规范?

每个组件都会显示一个实时UI操作系统 ,自动解析文档,测试结果(Bit运行组件单元测试等),以便所有组件都可以被设计和开发团队发现。

干货:看看国际大厂是如何创建UI组件设计规范?

Bit的工作流可让你在UI一致性和设计规则之间找到一个更快,更动态的工作流。它也是开源的,所以可以随意查看。

6、平衡一致性和灵活性

丘吉尔曾经说过“改善就是改变,完美就是经常改变”。如果我们过于严格地执行一致性,这将会影响创新。

干货:看看国际大厂是如何创建UI组件设计规范?

在我们建立新事物的过程中,我们必须对规则进行适当的调整,预留出一些空间给变量,但不能因为调整让事物陷入混乱。

或许这个说法听起来没有什么特别之处,但正确的理念,方法和工具可以帮助你实现UI一致性和创新之间的平衡。以下是一些保持平衡有效的建议。

从设计的角度来看,并非每种风格都应该重新定义和预先定义。

例如,某个组件(导航栏,项目等)可能与应用程序的其余部分相比具有相对大小或边距。在不同的情况下,这些变量可能会发生变化,因此可以预留一些空间出来。

优步和其他团队使用的另一种有用的方法是将基本/全局/基础组件与“辅助”组件分开 。

例如, Uber使用具有超过22种不同颜色和22种值的主要和次要组件,总共484种独特色调。 创建了70多种独特模式 - 每个有Uber服务的国家都有一种独特模式。

设计人员与开发人员的协作是找到这种平衡的关键。一些团队(如沃尔玛实验室 )致力于提高UI组件本身的可重用性,从而缩小与开发人员端的差距。

干货:看看国际大厂是如何创建UI组件设计规范?

正确的工具和工作流程对UI也有很大的帮助,像Bit和Storybook这样的工具就可以帮助促进这种平衡。

在别无选择的情况下,打破一致性、模式 、视觉和文字是一种很好的方式,可以给用户一种熟悉的感觉并减少混乱。 一致的模式 ,可识别的视觉效果和一致的语气可以使用户感觉安全,直观地与你的产品互动。

总结

l 保持UI和UX的一致性可以引导用户成功与您的产品进行交互。

l 设计系统是UI / UX不断发展的主体。基于组件的设计系统具有视觉和功能一致性。

l Uber,Airbnb,Pinterest,Netflix和其他优秀团队使用基于组件的设计系统来创建和发展他们的视觉语言。

l 要构建组件设计系统,您可以创建库,使用Bit并利用不同的工具和方法来逐步扩展它。

l 通过为变量留出空间,使用有用的工具和鼓励协作文化来平衡一致性和灵活性是很重要的。

l 切记:平衡和协作就是一切。这不是一项单一的工作,而是设计师和开发人员共同进行的持续旅程。

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

比起设计和开发流程的选择,还有几个事情更重要

资深UI设计者



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


在 Sarah 给 Jimmy 讲完了她在设计上的一些原则之后,Jimmy 就准备开始重新设计那个客户等着要的新的仪表盘界面了。与此同时,他所在的公司 Shmuckle 准备设置一个新的产品经理的职位,并且将会在公司内部选择合适的人员来任职。Jimmy 对此非常有兴趣,实际上,在当前的架构下, Jimmy 是一个非常合适的候选人。但是要担任这个职位,他必须证明自己能够胜任这个职位,证明自己知道如何管理项目和团队。

对于他正在做的这个控制面板的设计项目,他也正在挑选合适的产出流程。用敏捷(Agile)开发流程更好,还是应该用瀑布模型(Waterfall Model)?又或者是循环式开发流程?他觉得跟开发部的同事聊一聊会是更好的选择。

当他找到工程部的 Boris 的时候,他正在楼道里刷推特摸鱼。「用什么流程?那还用问,当然是敏捷啦。这个最好,过程清晰简单,现在没有什么办法比敏捷更好处理各种数字产品的设计和开发啦。」接着,Boris 去隔壁会议室拖出一个白板,并且说道:「给我一个小时,我告诉你关于敏捷开发的一切。接着还能捎带计划一下每周的工作内容,这样你就能完全明白要干啥了。哦,差点忘了,还有几个播客和视频可以帮你更加深入地了解敏捷。」

敏捷开发以用户的需求进化为核心,采用迭代、循序渐进的方法进行软件开发。在敏捷开发中,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视、可集成和可运行使用的特征。换言之,就是把一个大项目分为多个相互联系,但也可独立运行的小项目,并分别完成,在此过程中软件一直处于可使用状态。

絮絮叨叨的 Boris 终于找到一个倾诉的对象,Jimmy 一时之间感到颇为尴尬,不知道如何回应。好在这个时候,开发部另外一个部门的 Floris 从门口路过,Jimmy 赶紧喊住他「Floris 我到处在找你,你怎么在这儿啊」说着就拉住 Floris 的手,窜进了另外一个办公室,远离了热情的 Boris。

「干啥?你俩在聊啥?」

「Boris在跟我说敏捷开发……」

「啥玩意儿?他跟你讲敏捷开发?快拉倒吧,他们部门里面唯一敏捷的就手头上的 Macbook。我们这边都用瀑布模型来作为产品开发的流程,因为它是线性的,有着更简单的结构,操作起来也简单,很少会发生混乱。」说着,Floris 从办公室的书架上摸出一堆文档压到 Jimmy 手上。「你要的东西都在里面,祝你好运。如果你需要任何帮助,请在公共的平台上跟我约时间,我们可以开个小会解决一下问题~」说着 Floris 回到自己的桌子边,开始继续干活儿。

瀑布模型(Waterfall Model) 是一个项目开发架构,开发过程是通过设计一系列阶段顺序展开的,从系统需求分析开始直到产品发布和维护,每个阶段都会产生循环反馈,因此,如果有信息未被覆盖或者发现了问题,那么最好「返回」上一个阶段并进行适当的修改,项目开发进程从一个阶段「流动」到下一个阶段,这也是瀑布模型名称的由来。包括软件工程开发、企业项目开发、产品生产以及市场销售等构造瀑布模型。

拿着一堆资料,回到自己的工位前,整个人都要陷入到怠惰的情绪里面,瘫坐在电脑椅上纠结了起来。信息太多了,不知道从何做起。在网上一搜也是成堆的内容,根本不知道从何入手。懵逼了。

Jimmy 决定采用最终的备用方案——万事不决问 Sarah。在 Jimmy 的工作经验当中,老领导 Sarah 总能给他靠谱的建议和可行的方案。

出问题的时候,先后退一步

Sarah 办公室的门从来都是敞开的。当 Jimmy 来找她的时候,Sarah 正在阅读一些有意思的东西。她的办公室里面有很多的书和绿植,漂亮的色彩让 Sarah 的整个工作区域仿佛能够唤起人的创造力和想象力,桌上打开的书页散发着油墨的味道,闻起来让人很有安全感,像家里的书房。「Hey,Sarah,我又有问题来麻烦你啦,你有空么?」

「我的门永远敞开着。这次有啥问题,看看我能怎么帮到你。」Sarah 听到声音就知道是谁,一边放下手头的文档,一边抬头笑着看到略显局促的 Jimmy 。说话间,Jimmy 非常熟悉地跑到办公桌另外一边的椅子上瘫坐下来,Sarah 笑着摇头,拿起咖啡壶给 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 没有看自己的电脑,而是像心理咨询师一样,盯着 JImmy ,进入了等他倾诉的状态。而 Jimmy 此刻也惊讶于 Sarah 如此洒脱迅速地放下手头的工作,并专注地帮助自己,于是也不再放飞地瘫坐着,直起腰身,开始认真地陈述自己的问题:

「实际上,你之前跟我说的设计原则,让我获益匪浅。我按照你告诉我的方法,找到了症结,解决了问题。但是我现在不仅仅是要设计这个仪表盘界面,我需要开发和实现。有人说敏捷开发比较好,有人说瀑布模型很给力,这些开发方式到底有啥差别,优势具体在哪我并没有搞清楚。有人说我需要的是敏捷开发里面 Scrum,还有人说,它实际上是 shmum,也有人称之为 Bshmum,结果还有朋友告诉我说 Google 的 Design Sprint 才能帮我解决问题。我感觉脑子快要炸了。所以……Sarah 你明白么,我需要帮助了。 」

听到 Jimmy 说到后面,Sarah 就明白了他碰到什么问题了。「Jimmy,没事儿,我们总会在某些时候碰到问题,别人的指导总会派上用场。」

「我可以理解,如果在网上搜索这些相关的信息,会有太多杂乱的内容让你感到信息过载。幸运的是,如果你理解这些东西背后的基本原理,就可以相对轻松地梳理清楚所有的内容了。」

「早知道我应该一开始就来找 Sarah 问问。」Jimmy 不由得对自己抱怨了一句。说着,他在摸起咖啡杯旁边的纸和笔,准备做笔记,就像上次那样。Sarah 看穿了他的小心思,笑道:「不用记。」说着,喝了一口咖啡,然后继续道:「先想想看,我们为什么会有敏捷、瀑布模型、冲刺模型,为什么要用循环工作法呢?」

「为了?」Jimmy 下意识挠头。

「是的,但也不完全是这样。总的来说,我们需要一个过程来呈现产品,因为人类的思维是没有办法直接掌控混乱的事物。此外,一个清晰的、可遵循可记录的流程,能够确保你在完成后,确保产品的整个开发过程是可交付的,细节也是可回溯的。这就是为什么,我们需要这些流程。」

「最首要的问题,不是选择哪个流程,而是要了解这些流程为什么而存在,以及我们可能会碰到什么样的问题。无论你选择哪一个。」Sarah 看了一眼窗外,继续说道:「你有问过公司的其他的同事,他们都遵循什么样的流程么?」Sarah 问道。

「问过了,绝大多数都采用的敏捷和瀑布模型。」Jimmy 说到。

承诺是关键

「首先要告诉你的是,两种方法都很棒。但是绝大多数的公司只会在两种方法当中选择一种。因此,当人们采用敏捷或者瀑布的时候,我们更多看到的是他们所做的设计或者开发的小冲刺。以往,我们会看到团队会在3个月或者半年这样的时间尺度当中,一直保持着高强度冲刺的状态的。在旁观者眼中,会看到一个清晰的故事,或者说整个产品逐渐设计或者开发出来的景象。如今流行的做法是将冲刺划分为很多不同的阶段,这也是为什么如今被称为小冲刺。不过本质上,做的事情和内容并没有改变。」

「另外,很多人会使用敏捷的方法来做项目,过程中会不断的迭代修改。他们希望通过这样的方法来获得更好的结果。实际上,很多团队会持续不断地、长期地坚持这么做,几个月甚至一年半载都没有发布任何东西。如果你在这种情况下,会问自己,到底出了什么问题?我会告诉你,原因在于没有清晰的承诺,以及太多的事情让人分心。大家都不会承诺在一段时间内交付一些东西,使用各种借口不按时、按预算来完成项目。」

「如果这个时间只是一两周,一个月,好吧,或者说一年,这个周期并不重要。重要的是,你不需要拥有一个清晰的过程,并且承诺提供一些东西。当然,这是很有挑战性的。这意味着,在这个情况下,你必须作出一些选择,来完成任务。」Sarah 总结道。

阻碍前进的东西

「到底使用哪种敏捷的方法,采取多少个步骤,或者使用经典的瀑布模型,借助谷歌的设计冲刺,都可以,都没有问题。大家总会认为,采用哪种过程是关键,但是现实是,这个过程始终都只是达成目的一个手段而已。」

「真正的问题在于,人的天性是懒惰的,没有按照承诺交付东西。总是忍不住的拖延,膨胀的自我,办公室政治,爱来事儿的甲方,喜欢变卦的客户,它们还都会像拦路虎一样进入产品和设计的流程。无休止的辩论,不断改变的策略,不断膨胀来回拉锯的会议,最后你只能呆滞地坐在办公室当中,想想自己的生活到底出了什么问题。最后,我想说一下多年前,我自己所经历的一个项目。」Sarah 觉得她应该从具体案例上来说说这个事儿了。

「所以,首先你应该清楚,在一个特定的时间段内,交付一些东西出来。你要保证你的团队不会跳票和拖延,也不会让预算超出计划。你将要在约束中工作。约束其实是一种隐藏的优点,也许并不是每个人都明白。你需要完全保持专注,除了你的和参评之外,不会被其他的任何东西分心。就你的情况而言,你需要专注于这个仪表盘界面的设计和实现。」Sarah 说道。

「团队的规模很重要。不过那是后话,后面咱们再仔细聊。」

「假设,你有一个三个人组成的团队,他们共同负责开发并发布你的产品的下一个功能。具体到你的头上,就是为你开发并实现这个重设计的仪表盘。你需要确保公司的其他人不会前来干涉他们的工作,不会来和他们讨论这个项目以外的任何事情。」

「这一点极为重要。他们必须保持专注。减少被打扰的机率——或者说不被打扰是最好的事情,他们能够专注而清晰的思考问题。除了手头的任务之外,他们不会需要去做其他的任何事情,不会被其他的工作内容所分心。对于如何做手头的工作,什么时候做,具体做什么,他们应当有足够的控制权和自主权。最后,请记住这一点:

团队必须足够小。如果太大,沟通问题一定会成为主要的障碍。每增加一个人,想让大家信息和想法保持一致的成本,就会成倍增加。如果你拥有太多的自由,太多的资源以及大量的人员,你不仅会得到过度的设计,超出常规的工作,需要超出计划的预算,以及一个没有重点,不够出彩的产品。」

问题总是会出现的

「如果你像我说的一样,后退一步来看问题,就会意识到,流程背后所存在的问题,并不是流程本身的优劣,也不关乎公司、人员、国家、文化或者其他。这是关于纪律和约束。不仅是团队本身需要纪律,负责人要有纪律感,业务也需要有纪律约束。如同我们所知道的,团队也好,产品也好,公司也好,它都是自上而下的,顶部的纪律、约束和眼界,决定了底部的纪律、调性和产出。」

「现在,你可能会问自己,如果你的项目出现了问题,会怎么办?那么首先,对于你想要达成的目标,需要一个清晰的愿景或者想法。除非你的愿景和目标足够清晰,否则你是没有办法来提供承诺的。在项目开始之前,这个愿景/目标必须有足够清晰的定义,是否能够达成,难度高低,是否具备可执行性,否则在过程中一定会有所偏离。在这里,给你几个小贴士,务必要记住:

不要自欺欺人,你需要提前计划好整个项目,避免出错。很多事情都会出错,所以你需要有目标有愿景,你需要向着目标前进,并且随时做好解决问题、纠偏的准备。一旦你被其他的因素影响,就很容易增加开发时间、增加预算、招募更多的人手。不要相信所谓的规划和蓝图,那什么都不是。问题是一定会出现的,出错了,就专注于最终目标,抓紧手头的项目,别无其他。」

Sarah 说道这里,Jimmy 已经开始有所思考了。「所以,在我告诉你这些事情以后,对于你你手头的这个仪表盘的项目,你打算下一步要怎么做?」

需要始终牢记的事情

Jimmy 的脑中仍然在反思 Sarah 刚刚说过的话,下意识回复道:「要有远见,目标清晰,为即将出现的错误与问题做好准备,组建一个足够独立的小团队,和公司其他的团队和部门隔离开来,这样可以在不被打断的情况下聚焦于当前的任务,最重要的是,要在承诺的日期前交付承诺的产品。但是我不知道团队要有多小,我应该带多少人?」Jimmy 问道。

「如果我说我知道你要带几个,那么我一定是在骗你。不过,通常而言,你这种规模不算太大的产品,我建议控制在3人以内。你是这个项目的主管设计师,也是产品经理,在设计上已经没有大的问题,你还需要两个开发人员,一个负责前端,一个负责后端,这样足矣。」Sarah 回答道。

「那么我应该花费多少人在这个上面呢?」Jimmy 又问道。

「这个是你的项目,时间应该由你来衡量。不过,你需要一开始就清楚你手头有多少资源,你有多少时间来投入这个项目,有多少可供调用的预算,以及管理团队的耐心达到了什么程度。而且,这个事情最关键的并不是时间,而是你的承诺,以及到达约定时间之后要交付的东西。这不仅是对上层的责任,对于你和你的项目而言,也是一个可供奋斗的目标和清晰的边界。你的项目看起来并不算小,这个人员工作量之下,可能需要花费一个月的时间来进行开发。但是请记住,在一个月的时间内,你必须提交出一个可用的产品出来。从我的角度上来看,我是不允许增加预算和时间的。约束对双方其实都是有利的。」Sarah 说道。

「那么我还是想问最开始的那个问题,到底应该使用敏捷还是瀑布模型?」Jimmy 还是忍不住问道。

「我不知道。」Sarah 坦言道:「你的项目应该由你来决定。对我而言,选择哪个流程其实并不算最重要的问题,相反我刚刚说道的,流程之前的种种问题才是最重要的,关于承诺,团队的构建和管理,这些因素产生的影响更为深远。如果你清楚的知道最终要产出的产品,流程就仅仅只是手段了。」Sarah 笑着总结道。说话间,她伸手去拿之前没看完的文档。「谢谢,Sarah,」Jimmy 笑道:「你好像又救了我一次。」说着 Jimmy 走出了Sarah 的办公室。

「我的门一直都敞开着。」Sarah 低声说道,走远了 Jimmy 大概并没有听到这句低语。

结语

在设计和开发数字产品的时候,每个团队的负责人可以选择自己习惯的或者自己青睐的流程和方法。使用什么样的方法无关紧要,在未来10年,我们可能还会碰到更多的新方法,新的策略。而唯一不变的,始终还是最基本的问题,团队,承诺和交付。

我注意到,有人把产品所使用的敏捷和瀑布模型这类流程称为「项目的上帝」。但是实际上,不管哪种流程,依然会陷入无休止的扯皮会议和无意义的辩论,出现了问题之后,开始修改时间表。「我们无法按时完成功能A,因此我们无法开发模块B,开发人员又需要参与下一个项目,因此我们资源是不够用的,所以呢,这个项目不得不停一个月。」这情况很常见,也是典型的反面案例。

我相信,产品团队应该高度专注于当前的产品,和其他产品的需求、各种无关的事务隔离开来。「Hey,Angela,我们的大客户要求这个今天上线,能不能把你的项目放一边,帮我们把这个产品弄上线?」这也是一个反面案例。拒绝。


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

 



HTML2.1表单标签及属性介绍

seo达人

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

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title>表单标签及属性介绍</title>

   </head>

   <body>

   <!--form:表单标签,在html页面创建一个表单(浏览器上不显示),若要提交数据到服务器则负责收集数据的标签要放到form内 ;-->

       <!--action:(确定表单提交的路径);-->

       <!--method提交方式:get(默认值)有内容 ,post没有-->

       <form action="#" method="get">


           <!--input:输入域标签,获取用户输入信息;-->

           <!--type值不同收集方式不同:hidden(隐藏字段,数据会发送到服务器但浏览器不显示),text(文本框),password(密码框),radio(单选框),checkbox(复选框),

               file(文件上传组件),submit(提交按钮),button(普通按钮),reset(重置按钮);-->

           <!--name:元素名(表单数据需提交到服务器必提供name属性值),服务器通过属性值获取提交数据;-->

           <!--readonly:只读-->

           <!--value:设置input默认值。submit和reset为按键上显示数据-->

           <!--size:大小-->

           <!--maxlength:允许输入的最大长度-->

           隐藏字段:<input type="hidden" name="id" value=""/><br/>

           用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="20"/><br/>

           密码:<input type="password" name="password"/><br/>

           确认密码:<input type="password" name="repassword"/><br/>

           性别:<input type="radio" name="sex" value="man"/>男

           <input type="radio" name="sex" value="woman"/>女<br/>

           爱好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼

           <input type="checkbox" name="hobby" value="打电动"/>打电动

           <!--checked:单选或复选框默认勾选-->

           <input type="checkbox" name="hobby" value="画画" checked="checked"/>画画<br/>

           头像:<input type="file" /><br/>

           <!--select:下拉列表标签-->

           籍贯:<select name="province">

               <!--option:子标签,下拉列表中的一个选项-->

               <option>---请选择---</option>

               <!--value:发送得服务器的选项值-->

               <option value="北京">北京</option>

               <option value="上海">上海</option>

               <!--selected:勾选当前列表项-->

               <option value="广州" selected="selected">广州</option>

           </select><br/>

           自我介绍:

               <!--textarea:文本域-->

               <textarea>


               </textarea><br/>

           提交按钮:<input type="submit" value="注册"/><br/>

           普通按钮:<input type="button" value="普通按钮"><br/>

           重置按钮:<input type="reset"/>

       </form>

   </body>

</html>


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


医疗保健类产品设计、界面设计及交互设计灵感

博博

医疗保健类产品设计、界面设计及交互设计灵感

UI巴巴 2018-08-03 21:40:30

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

今天将从医疗保健类产品开始延展到互动和交互界面。很多医疗产品的界面有可能是一个小屏幕,也有可能是非常大的屏幕。

产品

医疗类的产品我们选择了一些可穿戴设备的概念设计。

医疗保健类产品设计、界面设计及交互设计灵感

Kingyo设计的Sange手表

医疗保健类产品设计、界面设计及交互设计灵感

Crux Product Design 和 Chris Pearce 设计的

医疗保健类产品设计、界面设计及交互设计灵感

Amazfit

医疗保健类产品设计、界面设计及交互设计灵感

Gražina Bočkutė为盲人设计的可穿戴配件

交互

我们与不同设备的交互不断变化,将语音用户界面引入医疗行业将彻底改变人们对护理的看法。精细设计的语音助理能够像人一样,更贴心。

医疗保健类产品设计、界面设计及交互设计灵感

Michal Sambora设计的Alexa助理的界面

医疗保健类产品设计、界面设计及交互设计灵感

Gleb Kuznetsov✈设计的ai智能语音助理

医疗保健类产品设计、界面设计及交互设计灵感

SELECTO设计的语音助理

界面

干净,简洁,充满未来感,避免错误的发生。

医疗保健类产品设计、界面设计及交互设计灵感
医疗保健类产品设计、界面设计及交互设计灵感
医疗保健类产品设计、界面设计及交互设计灵感
医疗保健类产品设计、界面设计及交互设计灵感
医疗保健类产品设计、界面设计及交互设计灵感
医疗保健类产品设计、界面设计及交互设计灵感


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

Android MVP极限封装(一)

seo达人

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

MVP架构在Android这一块已经盛行依旧,对于一些学习能力比较强的人来说,已经能够运用自如甚至改造优化了,对于吾等菜鸟,却是如此的陌生,今日这篇博客,算是小弟在学习和应用上的一点总结罢了,如有不足,还请各位大神不吝指教。

MVP架构是什么就不多说了,博主主要很大家分享的是,如何设计MVP架构。

先来分析一下MVP如何使用:M-V-P三层之间,P作为中间层,负责M,V之间的数据交互的中介,将数据从M层获取,处理之后提交到V层,换句话说,V需要持有P的实例,P层需要持有V的实例。原理很简单,使用泛型对数据进行封装处理: 
1.定义一个V层的空接口,主要是方便封装:

/**
 * V层接口
 */ public interface IView { }
            
  • 1
  • 2
  • 3
  • 4
  • 5

2.定义一个P层的接口:

/**
 * 抽象为接口
 * 
 */ public interface IPresenter<V extends IView> { /**
     * 绑定视图
     * 
     * @param view
     */ void attachView(V view); /**
     * 解除绑定(每个V记得使用完之后解绑,主要是用于防止内存泄漏问题)
     */ void dettachView();

}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

3.封装P基类:绑定解绑V实例

/**
 * 抽象类 统一管理View层绑定和解除绑定
 *
 * @param <V>
 */ public class BasePresenter<V extends IView, M extends IModel> implements IPresenter<V> { private WeakReference<V> weakView; protected M model;

    public V getView() { return proxyView;
    } /**
     * 用于检查View是否为空对象
     *
     * @return */ public boolean isAttachView() { return this.weakView != null && this.weakView.get() != null;
    } @Override public void attachView(V view) { this.weakView = new WeakReference<V>(view);
    } @Override public void dettachView() { if (this.weakView != null) { this.weakView.clear(); this.weakView = null;
        }
    }
}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

4.M层封装:

/**
 * M层
 */ public interface IModel { } /**
 * 登录model
 * Created by admin on 2018/2/5.
 */ public interface ILoginModel extends IModel { void login();
} /**
 * 登录
 * Created by admin on 2018/2/5.
 */ public class LoginModel implements ILoginModel { @Override public void login() { // TODO: 2018/2/5 发起登录请求  }
}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

之后,将数据提交到activity或者fragment就行了。 
最基本的铺垫已经做好了,接下来就该封装View了:

/**
 * Created by admin on 2018/2/5.
 */ public abstract class MvpActivity<V extends IView, P extends BasePresenter<V>> extends AppCompatActivity implements IView { private P presenter;

    @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState);
        ...
        presenter=getPresenter();
        presenter.attachView(this);
    } protected P getPresenter() { return presenter;
    } protected void setPresenter(P presenter) { this.presenter = presenter;
    } protected V getView() { return (V) this;
    }
    ...
    @Override protected void onDestroy() {
        presenter.dettachView();
        ... super.onDestroy();
    }
}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

收工,MVP基础框架搭建完成了。没错,就是基础框架,但是能不能用呢,让我们拭目以待吧。 
先来写一个View:

public interface ILoginView extends IView { void onLoginSuccess(); void onFailed();

}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

然后是Presneter:

/**
 * Created by admin on 2018/2/5.
 */ public class LoginPresenter extends BasePresenter<ILogin, LoginModel> { public LoginPresenter() {
        model = new LoginModel();
    }

    public void login(){
        model.login(new LoginCallBack() { @Override public void onSuccess() { if(null!=(ILogin)getView()){
                    weakView.onLoginSuccess();
                }
            } @Override public void onFailure() { if(null!=(ILogin)getView()){
                    weakView.onFailure();
                }
            }
        });
    }

}
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

最后来完成Activity的逻辑:

public class LoginActivity extends MvpActivity<ILoginView, LoginPresenter> implements ILoginView { ...
    @Override public LoginPresenter getPresenter() { return new LoginPresenter();
    } public void login(View view) {
        String name = etUserName.getText().toString();
        String pwd = etUserPwd.getText().toString();
        getPresenter().login(name, pwd);
    }

    @Override public void onLoginSuccess() {

    }

    @Override public void onFailed(){

    ...
}


    




    


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


日历

链接

个人资料

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

存档