在Xdpi下绘制Xpx长度，实际的物理距离都是1英寸，为什么一定要选160呢？如果设定宽高为厘米，或者英寸之类的物理单位，屏幕根据dpi的大小来计算要显示多少像素才能达到这个物理单位，不是更好？为什么要引入dp？
上面的回答得都很详细了 我来总结一些经验:1.xml布局时候尽量少出现dp 杜绝px 2.多用weight权重分割布局 gravity设置重心布局3.align+（如layout_alignright）系列布局再用margin+（如layout_marginleft）系列调整view之间的距离（我认为align和margin组合对于网传那么严重的碎片化可以很好解决 现在低端机都能350dp以上 dp跨度以后会越来越小 碎片化迟早会完美解决的。所以碎片化明显是夸大的） 能最大限度的减少不同dip手机的布局误差4.一些按钮，拖动条肯定会因为机型繁多dp各异发生大小变化 为了适应低端机 应该适当做小点我认为安卓机采取iPhone6 plus的dp再高百分之十 屏幕就已经完美了 此时色彩明艳感达到最好（三星的屏做到了）我所指的碎片化是指应用软件开发层面上的。 关于系统和驱动程序的碎片化不作考虑 我估计很难解决有更好的解决方式 请大神留下评论。
作为一个经常拿着计算器算长宽，然后给 Android 应用各个分辨率提供界面切图的死美工，我想尝试回答一下后半个问题，也就是为啥以 160 dpi 作为基准：&br&&br&Android Design [1] 里把主流设备的 dpi 归成了四个档次，120 dpi、160 dpi、240 dpi、320 dpi&img src=&/fff4ed639ac4dc56cb87_b.jpg& data-rawwidth=&286& data-rawheight=&133& class=&content_image& width=&286&&&br&实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。&br&&br&也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。&br&&br&但假设以 240 dpi 作为标准，那需要 DP 是 3 的倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2&br&&br&而以 LDPI 和 XHDPI 为基准就更复杂了，所以选择 160 dpi &br&&br&话说我觉得在给 Android 的应用提供切图的时候经常像是在算 24 点。。。&br&&br&[1] &a href=&///?target=http%3A///design/style/devices-displays.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/d&/span&&span class=&invisible&&esign/style/devices-displays.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
作为一个经常拿着计算器算长宽，然后给 Android 应用各个分辨率提供界面切图的死美工，我想尝试回答一下后半个问题，也就是为啥以 160 dpi 作为基准：Android Design [1] 里把主流设备的 dpi 归成了四个档次，120 dpi、160 dpi、240 dpi、320 dpi实际开发当…
1.在Xdpi下绘制Xpx长度，实际的物理距离都是1英寸，为什么一定要选160呢？&br&
答：这个在Google的官方文档中有给出了解释，因为第一款Android设备（HTC的T-Mobile G1）是&b&属于&/b&160dpi的。&br&&blockquote&The generalized sizes and densities are arranged around a baseline configuration that is a &em&normal&/em& size and &em&mdpi&/em&(medium) density. This baseline is based upon the screen configuration for the first Android-powered device, &b&the T-Mobile G1&/b&, which has an HVGA screen (until Android 1.6, this was the only screen configuration that Android supported).&/blockquote&
为什么说是&b&属于&/b&呢？&br&
因为我查过T-Mobile G1的DPI，其实它准确的DPI不等于160，G1的配置信息如下：&br&&ul&&li&屏幕尺寸：3.2 寸（8.1 厘米）&/li&&li&分辨率：320 x 480（HVGA）&/li&&/ul&
在计算DPI前我先简单介绍一下DPI以及相关概念，DPI（Dots Per Inch）翻译为每英寸像素点的个数，英寸是一个物理单位，1英寸 = 2.54厘米，大家平常说的手机屏幕4.3英寸，4.5英寸指的是屏幕对角线的长度，如下图所示：&br&&img src=&/1ddbf75a07fc5dcba61547_b.jpg& data-rawwidth=&409& data-rawheight=&266& class=&content_image& width=&409&&
分辨率480 x 800，屏幕尺寸4.3英寸和分辨率540 x 960，屏幕尺寸4.5英寸的DPI分别是：&br&&img src=&/391a3ed34ca4b3f7b38a6_b.jpg& data-rawwidth=&426& data-rawheight=&134& class=&origin_image zh-lightbox-thumb& width=&426& data-original=&/391a3ed34ca4b3f7b38a6_r.jpg&&
如果按照这样的计算方式的话，T-Mobile G1应该为180dpi，这个计算大家可以使用计算器或者手动的计算方式得出，为了更具说服力，我贴出自己的计算截图（使用DPI Caculator计算）&br&&img src=&/5561bdbb6c8bb30a608dfaee_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&/5561bdbb6c8bb30a608dfaee_r.jpg&&
大家可以看到计算出来的结果是180而不是160，大家会想那为什么不直接用180作为基准（mdpi）而是160呢？这就好像为什么是二进制而不是其他进制，就像@&a href=&/people/jjying& class=&internal&&JJ Ying&/a&说的，180上下不好做适配，但是160无论是乘以0.5/2/1.5都很好适配，这就是为什么我说&b&属于&/b&而不是等于，Android其实为了不至于为每一个设备制造商做适配（其实资源文件的分包就算适配了：drawable-hdpi，drawable-ldpi），将不同屏幕大小和不同dpi的设备&b&大致&/b&划分为四类，如下图：&br&&img src=&/a547a8e829add9333d7edaf79b8e1ab3_b.jpg& data-rawwidth=&533& data-rawheight=&164& class=&origin_image zh-lightbox-thumb& width=&533& data-original=&/a547a8e829add9333d7edaf79b8e1ab3_r.jpg&&
大家可以看到T-Mobile G1的参数属于mdpi区域的，以上就是取160dpi作为基准的原因。&br&&br&2.如果设定宽高为厘米，或者英寸之类的物理单位，屏幕根据dpi的大小来计算要显示多少像素才能达到这个物理单位，不是更好？为什么要引入dp？&br&&br&
如果有兴趣可以看一下这个类的源码（网址）：&a href=&///?target=http%3A///file//java/ext/com.google.android/android/2.2_r1.1/android/util/DisplayMetrics.java& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GrepCode: android.util.DisplayMetrics (.java)&i class=&icon-external&&&/i&&/a& ，这个类中有很详细的dpi相关的成员函数和变量，下面的代码是在开发时获取dpi的代码，&br&&div class=&highlight&&&pre&&code class=&language-java&&&span class=&n&&DisplayMetrics&/span& &span class=&n&&metrics&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&n&&DisplayMetrics&/span&&span class=&o&&();&/span&
&span class=&n&&getWindowManager&/span&&span class=&o&&().&/span&&span class=&na&&getDefaultDisplay&/span&&span class=&o&&().&/span&&span class=&na&&getMetrics&/span&&span class=&o&&(&/span&&span class=&n&&metrics&/span&&span class=&o&&);&/span&
&span class=&n&&iDensity&/span& &span class=&o&&=&/span& &span class=&o&&(&/span&&span class=&kt&&int&/span&&span class=&o&&)(&/span& &span class=&n&&metrics&/span&&span class=&o&&.&/span&&span class=&na&&density&/span& &span class=&o&&*&/span& &span class=&mi&&160&/span& &span class=&o&&);&/span&
&/code&&/pre&&/div&&br&&br&
（1）我先回答前半部分，“如果设定宽高为厘米，或者英寸之类的物理单位，屏幕根据dpi的大小来计算要显示多少像素才能达到这个物理单位，不是更好？”&br&
答：我认为设置宽高为厘米/英寸，然后先通过上面代码动态计算dpi的值，然后再根据计算出的dpi计算出显示控件需要的宽和高是可行的，但是绝对不是更好，而是非常差，因为开发的原则遵循的是界面设计和功能逻辑分离，在程序中每次都首先需要计算一下dpi才能设定其他控件的宽高属性是很不友好的，你想想，你启动了某个程序，它界面一直出不来，后台还在计算着DPI,用户体验也不会好，超过5s估计就被当作ANR给kill掉了。&br&&br&
（2）为什么要引入dp？&br&
答：dp实际是dip（density independent pixel）,独立密度像素，意思就是与density密度（dpi）无关，我使用dp作为单位设置控件，不管你什么屏幕大小，多大的dpi，显示的效果始终保持一致。假如我们不引入dp，还是使用原始的px，现在我们需要在手机屏幕上绘制一条直线，在160dpi（每英寸160个像素点），而宽度是1英寸的手机上做开发和测试工作，我们设置这条直线长度是160px（占据160个像素点），也就是直线长度正好是手机的宽度，开发工作完成，我们把app发布到市场上，这时候&a href=&/people/jjying& class=&internal&&JJ Ying&/a&用他同样宽度1英寸，但是240dpi的手机安装了这个app，他能不抓狂！本该长度有屏幕这么宽的线视觉上只有原来的2/3，如果整个UI都使用px作为单位，就会有如下的效果。&br&&img src=&/acb6ab1d44aaed_b.jpg& data-rawwidth=&732& data-rawheight=&174& class=&origin_image zh-lightbox-thumb& width=&732& data-original=&/acb6ab1d44aaed_r.jpg&&&blockquote&Example application without support for different densities, as shown on low, medium, and high density screens.&/blockquote&上面这张图来自Google的开发网站。如果引入dp这个单位，这种问题就不会发生了，还是以上面的例子说明，如果在160dpi的设备上使用的是160dp,无论移植到240，120dpi上显示效果都是一致的。px和dp的换算公式&img src=&///equation?tex=px+%3D+dp+%2A+%28dpi+%2F+160%29& alt=&px = dp * (dpi / 160)& eeimg=&1&&，效果如下图：&br&&img src=&/1ce193a991aab1e9d877_b.jpg& data-rawwidth=&732& data-rawheight=&162& class=&origin_image zh-lightbox-thumb& width=&732& data-original=&/1ce193a991aab1e9d877_r.jpg&&
1.在Xdpi下绘制Xpx长度，实际的物理距离都是1英寸，为什么一定要选160呢？ 答：这个在Google的官方文档中有给出了解释，因为第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。The generalized sizes and densities are arranged around a baseline co…
已有帐号？
无法登录？
社交帐号登录小新专栏 的BLOG
用户名：小新专栏
文章数：88
评论数：46
访问量：633857
注册日期：
阅读量：24883
阅读量：272617
阅读量：1004724
阅读量：152588
51CTO推荐博文
最近的一个模块正好用到字体的相关内容，整理出来。
(一) 字体的几个参数 ，以Android API文档定义为准，见下图
要点如下：
1. 基准点是baseline
2. Ascent是baseline之上至字符最高处的距离
3. Descent是baseline之下至字符最低处的距离
4. Leading文档说的很含糊，其实是上一行字符的descent到下一行的ascent之间的距离
5. Top指的是指的是最高字符到baseline的值，即ascent的最大值
6. 同上，bottom指的是最下字符到baseline的值，即descent的最大值
Note:网上有很多错误的图，如果有疑问，就参看文档，区分对错。
为了帮助理解，我特此搜索了不同的示意图。对照示意图，会很容易理解FontMetrics的参数。
&1，测试的代码直接使用网上的代码，因为重复着众多，无所给出原始出处，故不注出。
我增加了Bitmap作为输出显示，完整代码如下：
public&class&FontMetricsDemoActivity&extends&Activity&{&&&&&private&Canvas&&&&&&&&&&&&@Override&&&&&public&void&onCreate(Bundle&savedInstanceState)&{&&&&&&&&&super.onCreate(savedInstanceState);&&&&&&&&&setContentView(R.layout.main);&&&&&&&&&&&&&&&&&&Paint&textPaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&textPaint.setTextSize(&55);&&&&&&&&&textPaint.setColor(&Color.WHITE);&&&&&&&&&&&&&&&&&&&FontMetrics&fontMetrics&=&textPaint.getFontMetrics();&&&&&&&&&String&text&=&&abcdefghijklmnopqrstu&;&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&float&baseX&=&0;&&&&&&&&&float&baseY&=&100;&&&&&&&&&float&topY&=&baseY&+&fontMetrics.&&&&&&&&&float&ascentY&=&baseY&+&fontMetrics.&&&&&&&&&float&descentY&=&baseY&+&fontMetrics.&&&&&&&&&float&bottomY&=&baseY&+&fontMetrics.&&&&&&&&&float&leading&=&baseY&+&fontMetrics.&&&&&&&&&&&&&&&&&&&&&&&&&&&Log.d(&fontMetrics&,&&baseX&&&&is:&&+&0);&&&&&&&&&Log.d(&fontMetrics&,&&baseY&&&&is:&&+&100);&&&&&&&&&Log.d(&fontMetrics&,&&topY&&&&&is:&&+&topY);&&&&&&&&&Log.d(&fontMetrics&,&&ascentY&&is:&&+&ascentY);&&&&&&&&&Log.d(&fontMetrics&,&&descentY&is:&&+&descentY);&&&&&&&&&Log.d(&fontMetrics&,&&bottomY&&is:&&+&bottomY);&&&&&&&&&Log.d(&fontMetrics&,&&leading&&is:&&+&leading);&&&&&&&&&&&&&&&&&&&&&&&&&&&&Bitmap&bitmap&=&BitmapFactory.decodeResource(getResources(),&R.drawable.fontmetrics);&&&&&&&&&Bitmap&mutableBitmap&=&bitmap.copy(Bitmap.Config.ARGB_8888,&true);&&&&&&&&&&&&&&&&&&canvas&&=&new&Canvas(mutableBitmap);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&canvas.drawText(text,&baseX,&baseY,&textPaint);&&&&&&&&&&&&&&&&&&&Paint&baseLinePaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&&&&&&&&&&baseLinePaint.setColor(&Color.RED);&&&&&&&&&canvas.drawLine(0,&baseY,&canvas.getWidth(),&baseY,&baseLinePaint);&&&&&&&&&&&&&&&&&&&canvas.drawCircle(&baseX,&baseY,&5,&baseLinePaint);&&&&&&&&&&&&&&&&&&&Paint&topLinePaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&topLinePaint.setColor(&Color.LTGRAY);&&&&&&&&&canvas.drawLine(0,&topY,&canvas.getWidth(),&topY,&topLinePaint);&&&&&&&&&&&&&&&&&&&Paint&ascentLinePaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&ascentLinePaint.setColor(&Color.GREEN);&&&&&&&&&canvas.drawLine(0,&ascentY,&canvas.getWidth(),&ascentY,&ascentLinePaint);&&&&&&&&&&&&&&&&&&&Paint&descentLinePaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&descentLinePaint.setColor(&Color.YELLOW);&&&&&&&&&canvas.drawLine(0,&descentY,&canvas.getWidth(),&descentY,&descentLinePaint);&&&&&&&&&&&&&&&&&&&Paint&bottomLinePaint&=&new&Paint(&Paint.ANTI_ALIAS_FLAG);&&&&&&&&&bottomLinePaint.setColor(&Color.MAGENTA);&&&&&&&&&canvas.drawLine(0,&bottomY,&canvas.getWidth(),&bottomY,&bottomLinePaint);&&&&&&&&&&&&&&&&&&&ImageView&imageView&=&(ImageView)&findViewById(R.id.imageView1);&&&&&&&&&imageView.setImageBitmap(mutableBitmap);&&&&&&&&&&&&&&}&}&
&log显示如下：
Note1：注意到各个数值都是整数，这是建立在baseY=100的情况下，去掉baseY,重新运行代码，log如下：
Note2: 参照线为baseline，即baseline=0的情况下，其他各线的数值。leading = 0,即行间距=0
2，以上是根据paint设置，获取相关的FontMetrics属性，并且只绘制了一行字符串，我们猜想，如果是多行，是否可以获得行间距leanding，代码如下：
&&&&&&&&&TextView&textView&=&(TextView)&findViewById(R.id.textView1);&&&&&&&&&String&textMultiLines&=&&abcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstu&;&&&&&&&&&textView.setTextSize(55);&&&&&&&&&textView.setText(textMultiLines);&&&&&&&&&&&&&&&&&&FontMetrics&fontMetrics2&=&textView.getPaint().getFontMetrics();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&float&topY&=&fontMetrics2.&&&&&&&&&float&ascentY&=&fontMetrics2.&&&&&&&&&float&descentY&=&&fontMetrics2.&&&&&&&&&float&bottomY&=&fontMetrics2.&&&&&&&&&float&leading&=&&fontMetrics2.&&&&&&&&&&&&&&&&&&&&&&&&&&&&Log.d(&fontMetrics&,&&topY&&&&&is:&&+&topY);&&&&&&&&&Log.d(&fontMetrics&,&&ascentY&&is:&&+&ascentY);&&&&&&&&&Log.d(&fontMetrics&,&&descentY&is:&&+&descentY);&&&&&&&&&Log.d(&fontMetrics&,&&bottomY&&is:&&+&bottomY);&&&&&&&&&Log.d(&fontMetrics&,&&leading&&is:&&+&leading);&
Note：显然，即使是多行的情况下，仍不能获得leading。
3，如果text是单行，获得各个属性将会怎样，代码如下：
String&text&=&&abcdefghijklmnopqrstu&;&&&&&&&&&TextView&textView&=&(TextView)&findViewById(R.id.textView1);&&&&&&&&&textView.setTextSize(55);&&&&&&&&&textView.setText(text);&&&&&&&&&&&&&&&&&&FontMetrics&fontMetrics&=&textView.getPaint().getFontMetrics();&&&&&&&&&&&&&&&&&&&float&baseX&=&0;&&&&&&&&&float&baseY&=&100;&&&&&&&&&float&topY&=&baseY&+&fontMetrics.&&&&&&&&&float&ascentY&=&baseY&+&fontMetrics.&&&&&&&&&float&descentY&=&baseY&+&fontMetrics.&&&&&&&&&float&bottomY&=&baseY&+&fontMetrics.&&&&&&&&&float&leading&=&&fontMetrics.&&&&&&&&&&&&&&&&&&&&&&&&&&&&Log.d(&fontMetrics&,&&topY&&&&&is:&&+&fontMetrics.top);&&&&&&&&&Log.d(&fontMetrics&,&&ascentY&&is:&&+&fontMetrics.ascent);&&&&&&&&&Log.d(&fontMetrics&,&&descentY&is:&&+&fontMetrics.descent);&&&&&&&&&Log.d(&fontMetrics&,&&bottomY&&is:&&+&fontMetrics.bottom);&&&&&&&&&Log.d(&fontMetrics&,&&leading&&is:&&+&fontMetrics.leading);&
log如下图所示：
Note：与多行获得的属性都相同。
A:虽然paint和textView所设置的textSize均为55，且为相同的字符串，但是两个获得的FontMetrics属性值并不相同。但是，我们发现，做除法之后，均为1.5倍关系。做出猜测，即Paint下，为mdpi对应的size，而TextView的size已经关联到了显示屏幕本身的320dip。所以获得属性值均为整1.5倍数
B:各种情况下，均未获得leading值。
&本文出自 “” 博客，转载请与作者联系！
了这篇文章
类别：┆阅读(0)┆评论(0)
16:47:55 11:43:52 16:24:24，Designer/算是个Geek/热爱一切美好的事物
Lamy Safari，陪伴我两年，非常好用，非常贴心。&br&&img src=&/d78ccde7a68ad353ade9_b.jpg& data-rawwidth=&960& data-rawheight=&640& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&/d78ccde7a68ad353ade9_r.jpg&&&br&顺便秀个字嘿嘿~&br&&img src=&/24cfb2b7bb49dbef818de6_b.jpg& data-rawwidth=&1600& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/24cfb2b7bb49dbef818de6_r.jpg&&
Lamy Safari，陪伴我两年，非常好用，非常贴心。顺便秀个字嘿嘿~
排名靠前的答案都说到点上了，我想补充说一下：对于电子产品这样内部构造相对其他日程用品来说较为复杂的产品，&b&苹果用其&/b&&b&登峰造极&/b&&b&工程水平，很好地管理了复杂，为复杂建立秩序，从而满足苛刻的工业设计，最终造就了我们所看到的简约。 &/b&众所周知苹果是一家设计和体验主导的公司，要满足其产品几乎 Obsessive（Jony Ive 在工业设计纪录片《Objectified》中用了这个词）的工业设计，强大的工程团队绝对居功至伟。&br&&br&如果无法妥善管理复杂会怎样？比如，试想一个装机菜鸟组装出来的主机，布局和走线是怎样的；再试想一个 DIY 老手做出来的主机作品是如何赏心悦目。（关于复杂与如何管理复杂，推荐唐纳德·诺曼所著的《设计心理学2》）&br&&br&&br&&br&--------分割线--------&br&&br&&br&&b&首先来讲我们所看到的简约。&/b&&br&&br&&br&以 15& MacBook Pro with Retina display 为例，我想我们对它设计上的简约是有共识的：&br&其简约体现在一体成型的 Unibody 机身结构所带来的没有任何多余装饰的外观，没有复杂的曲线，只有简洁有力的线条，方中带圆，刚柔并济。Unibody 使其外观上你所能看到的部分，除了屏幕、键盘、触摸板之外，都是同样的磨砂质感的阳极氧化铝材质。因此我认为简约并不是「使用」了哪些元素，而是「回避」了那些会破坏简约的元素。&br&&img src=&/061dc56c5a474ce287d9_b.jpg& data-rawwidth=&1049& data-rawheight=&635& class=&origin_image zh-lightbox-thumb& width=&1049& data-original=&/061dc56c5a474ce287d9_r.jpg&&&br&对比几乎同等定位和价位的 2014 款 Dell XPS 15，就算整体上线条已经够简约了，由于不同的材质拼接起来的机身外壳，瞬间打破了这种简约。&br&&img src=&/c22c77956c93acdb15aa5bb95fff6701_b.jpg& data-rawwidth=&960& data-rawheight=&640& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&/c22c77956c93acdb15aa5bb95fff6701_r.jpg&&&br&&br&再看两侧，干净的纯平面，接口布局也是近乎完美的居中对齐，屏幕和机身的厚度比例在视觉观感上也很平衡，很舒服。&br&&img src=&/8aa208baadd_b.jpg& data-rawwidth=&700& data-rawheight=&236& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&/8aa208baadd_r.jpg&&&br&同样对比 XPS 15，处于功能方面的考虑，接口比 RMBP 多（追求功能还是追求设计一般是这类产品设计时必要的权衡，肯定各有侧重的），视觉上没做到完美的居中对齐，白色文字的在黑色的材质上存在感太强，显得突兀，材质观感也不如阳极氧化铝，还有拼接和纹理等，这些元素都是对简约的破坏。&br&&img src=&/856e8bdee16a9e_b.jpg& data-rawwidth=&550& data-rawheight=&118& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&/856e8bdee16a9e_r.jpg&&&br&上面是两款价格和定位相当的产品在外观上的简要对比。苹果的产品线上，它有这个能力精心打造每款产品，当然随之而来的是相对略高的售价（其实现在 MBA 真得好便宜好有性价比了...）。至于那些更便宜的、面向更广泛的用户群的笔记本，外观上是如何妥协、如何不讲究，或者如何花狸狐哨乱来的，我就懒得贴图了- -&br&&br&&br&&br&&br&&br&&b&然后来讲在我们看不到地方，即机身内部的硬件构造，苹果是如何在工程上达到登峰造极的水平的。&/b&&br&&br&工程上的登峰造极，在我们打开底部 D 面内部结构也井然有序：定制成黑色调的所有电子元器件和 PCB 板，简直看得神清气爽。&br&&img src=&/11a16b2dd8d7e2b7addeeae_b.jpg& data-rawwidth=&1600& data-rawheight=&1200& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/11a16b2dd8d7e2b7addeeae_r.jpg&&&br&正因为对内部硬件构造有足够的自信，几乎每款苹果产品的宣传视频和官网图片，都会对此进行细致入微的介绍和展示。&br&&br&再看 XPS 15 的内部，蓝绿色的 PCB 板、各种颜色的元器件，各种肉眼可见的走线，还有贴歪的标签...&br&&img src=&/05afabe10f_b.jpg& data-rawwidth=&1600& data-rawheight=&1108& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/05afabe10f_r.jpg&&&br&可以看到在 Windows 笔记本中已经足够顶尖的 XPS 15，在外观简约和内部构造上，与 15& RMBP 相比还是有一定的差距。&br&&br&&br&更重要的是，苹果所设计和制造的是供人们日常使用的消费级电子产品，而非工艺品、艺术品。作为一款面向全球消费者的商业产品，工业设计和工程制造上几乎苛刻的前提下实现量产，离不开强大的供应商和供应链管理。想想看美如画的锤子 T1 在生产初期的产能和良品率吧...据说现在白色版的产能还是有点捉急呀...&br&&br&以上。
排名靠前的答案都说到点上了，我想补充说一下：对于电子产品这样内部构造相对其他日程用品来说较为复杂的产品，苹果用其登峰造极工程水平，很好地管理了复杂，为复杂建立秩序，从而满足苛刻的工业设计，最终造就了我们所看到的简约。 众所周知苹果是一家设…
如何通过 Machine Learning 预测下一个微软要改名的服务/产品是什么 ￣▽￣
如何通过 Machine Learning 预测下一个微软要改名的服务/产品是什么 ￣▽￣
尼采——Nietzsche
尼采——Nietzsche
错过了一整个世界上最强大最牛哔的互联网服务
错过了一整个世界上最强大最牛哔的互联网服务
个人理解: &br&把「&b&沉浸式体验」&/b&的这个&b&用户体验角度&/b&的概念和&b&「Immersive Mode」/「Translucent Bars」&/b&这两个&b&设计规范角度&/b&提出的设计模式&b&弄混了&/b&. 至于是设计师还是媒体还是用户们弄混的就不知如何追溯了. &br&&br&原因可能如下: &br&&ol&&li&Immersive Mode 和 Translucent 是官方提出的概念, 更多是从设计师和开发者角度来考虑的, 普通用户确实是没必要区分得很清楚的; &/li&&li&Immersive Mode 只对用虚拟键的手机有比较大的意义. 国内 Android 现状千奇百怪, 你懂的. 对于用实体按键/电容按键手机的用户来说, Immersive 和 Translucent 的 UI 呈现对于体验的影响基本没差;&/li&&li&怪 iPhone 和 iOS... iPhone 一直用实体 Home 键, 不存在虚拟按键的干扰问题. iOS 7 加入透明状态栏的特性后自然而然就创造出了「沉浸式」的体验. 于是大家就认为「沉浸式」这就应该是这样的了, 不管你 Android 上用的是 Immersive Mode 还是 Translucent Bars, 反正都是沉浸就是了...&/li&&/ol&
个人理解: 把「沉浸式体验」的这个用户体验角度的概念和「Immersive Mode」/「Translucent Bars」这两个设计规范角度提出的设计模式弄混了. 至于是设计师还是媒体还是用户们弄混的就不知如何追溯了. 原因可能如下: Immersive Mode 和 Translucent 是官方提…
最近刚读过一篇博客 &a href=&///?target=http%3A///articles/flat-design-is-content-driven& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flat Design is Content Driven&i class=&icon-external&&&/i&&/a& ，引用一段话&blockquote&&i&“Beyond the visual flatness, what both Windows Phone and Android have in common is their focus on content. The visual simplicity of flat design is an effective way of moving the focus from the UI chrome to the content.”&/i&&/blockquote&“内容为王”的时代，移动应用设计应当更多关注内容呈现和用户操作的效率，尤其是效率类的生产力应用，需要短时间集中精力在内容本身上面。UI的拟物元素会干扰视线，分散注意力。去拟物化、扁平化逐渐成为新的设计趋势，除了一定程度受到WP和Android的带动外，更多是内容驱动的。&br&&br&另外再说一下我个人对Skeuomorph——拟物设计的愚见：拟物除了模拟真实物体的物理外观、材质带来的质感外，更广义来说，应该也模拟、抽象真实物体的概念。比如iOS的边间回弹，就是真实物体具有“惯性”这么个物理概念；比如很多应用的侧滑边栏，英文叫“Drawer”——抽屉，我觉得非常形象：抽开来（侧滑），找到你想要的东西（一般侧边栏是导航功能，是入口）；再抽回去，而这个设计本身并没有去模拟抽屉真实的外观，只是借助这样一个概念。所以我觉得，做设计时，对拟物的理解应当更深入一些。&br&&br&其实很多应用的拟物UI完全是没有必要的，比如iPhone饱受诟病的Find My Friends，那精致的皮革，却怎么也无法对应到这个应用承载的功能。类似应用还有很多。苹果自己在桌面端的拟物设计也有很著名的失败案例，请看极客公园的一篇 &a href=&///?target=http%3A//www.geekpark.net/read/view/159460& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&苹果的拟物化设计之过&i class=&icon-external&&&/i&&/a& 的文章中有提到：&br&&blockquote&QuickTime 4 发布于乔布斯回归之初的 1999 年 6 月。正值大幅苹果公司大幅革新电脑外观，着力吸引首次购买电脑的新用户的关键时期。当时的设计师就认为如果在软件界面上模拟真实世界中对应物体的外观和操作方式，则这些从未接触过电脑的新用户无需太费力就能学会电脑系统的操作。在这样的思潮下，QuickTime 4 取消了沿用多年的音量控制方式，而是采用了和现实生活中的播放设备一模一样的滚轮式音量调节旋钮设计。&br&&img src=&/b50b96eb3fe407d8a24a0d5_b.jpg& data-rawwidth=&367& data-rawheight=&385& class=&content_image& width=&367&&&br&事实证明，这样的设计是失败的，QuickTime 4 正式发布之后，新老用户纷纷出于各种原因表达他们对新音量调节旋钮设计的不满：&br&&ul&&li&老用户们抱怨的原因是，传统风格的音量控制滑块消失了，他们过去已有的经验无法继续适用于这个新的界面。&/li&&li&新用户们也并不买账，他们中的很多人面对这样的界面则根本无所适从，很多用户完全没有意识到这个旋钮状的界面部件是用来控制播放器音量的。他们并没有在这个旋钮状部件和现实生活中的真实旋钮之间建立对应关系。&/li&&li&新老用户都表示，当他们发现这个旋钮是用来控制音量的之后，他们感到用鼠标来控制旋钮的操作极为不便。&/li&&/ul&面对用户的诸多不满，苹果公司不得不改变了这样的设计。在后续的 QuickTime 5 中，音量调节部分变成了常见的左右拉动式滑块，这一改变获得了用户的好评。&/blockquote&啊一不小心说了好多话（貌似引用的比较多= =），最后说几句。我平时主要用Nexus 4(Android 4.2)和Lumia 800(WP7.5)两部手机，自己也是大推Holo和Metro UI的粉丝，不过偶尔看看老妈的iPhone、老爸的iPad那些精致的拟物元素恰到好处的应用，也是别有一番滋味。多样化的乐趣，如果大家都扁平化了，世界也就无趣了。
最近刚读过一篇博客
，引用一段话“Beyond the visual flatness, what both Windows Phone and Android have in common is their focus on content. The visual simplicity of flat design is an effective way of moving th…
如果只是静态 UI 设计，花点时间做出高保真的 UI 是可行的，只不过效果不如 PS、Sketch 这样的工具来得好，比如多层投影叠加无法实现（除非叠多个同样的元素然后设置不同的投影，就是略蛋疼 - -），比如字体渲染，尤其是 Windows 上，浏览器的字体渲染完全不能还原移动设备上的真实面貌。&br&&br&如果是 UI 动效，正好最近在尝试用 Axure 8.0 Beta 看能把动画做到什么程度，于是做了两个简单的 MD 动效来练手，演示效果戳 & &a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&&ul&&li&示例 1，FAB 展开二级功能菜单：&br&&/li&&/ul&&img src=&/c16ec4bbfab_b.png& data-rawwidth=&1440& data-rawheight=&464& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/c16ec4bbfab_r.png&&&br&&ul&&li&示例 2，FAB 渐变为 App bar 的背景色（纯粹是尝试动画效果，不要在意功能逻辑的细节）：&br&&/li&&/ul&&img src=&/a65ac3456efd302e0cb864_b.png& data-rawwidth=&2048& data-rawheight=&820& class=&origin_image zh-lightbox-thumb& width=&2048& data-original=&/a65ac3456efd302e0cb864_r.png&&&br&&br&&b&感受&/b&&br&&ol&&li&由于 Axure 这款工具的定位是快速制作原型，而非制作精美的 UI 动效，尤其是移动端的动效，因此只能实现很基础的动画，无法精确还原官方设计规范中指定的动画曲线。&/li&&li&动画设置倒是没有难度，预设的几种动画形式改改参数就行。可能是因为有 Flash 动画的制作经验，所以尽管 Axure 的动画设置不是时间轴这样的方式，我对动画的节奏基本还是能有把握的，当然反复修改也是不可避免的。不过大量重复操作有点低效，以第一个 FAB 展开二级菜单为例，动作设置如图（收起则是逆向再来一遍...）：&img src=&/5ade5efcd61e18bf9adb05_b.png& data-rawwidth=&420& data-rawheight=&412& class=&content_image& width=&420&&&br&&/li&&li&预览方式依旧是生成 HTML 在浏览器中预览，尽管移动端有 AxShare 这个 app 但目前实在很弱，因此对于真实移动设备的预览支持不好，这一点是相比 PS、Sketch、Pixate、Quartz Composer、Form 等静态或动态设计工具最大的劣势。&/li&&/ol&&br&Tools don't matter, what does matter is what you're capable of creating with them.&br&&br&&br&以上。
如果只是静态 UI 设计，花点时间做出高保真的 UI 是可行的，只不过效果不如 PS、Sketch 这样的工具来得好，比如多层投影叠加无法实现（除非叠多个同样的元素然后设置不同的投影，就是略蛋疼 - -），比如字体渲染，尤其是 Windows 上，浏览器的字体渲染完全…
Craig Federighi 的演讲是除了乔布斯之外我认为最好的，也是我最喜欢的。应该说我首先很欣赏 Craig 本人，他风度翩翩又给人一种很平易近人的感觉，不像乔布斯那样有高高在上的光环，不像 Scott Forstall 那么傲娇（犀利的发着光芒的小眼神），Jony Ive 只适合在视频里对设计理念娓娓道来，现场演讲是冷场灾难，Phil Schiller 市场营销 SVP，一般只做硬件新品的介绍。Craig 毕竟是工程师高管，对软件特性的讲解首先是绝对专业，Demo 演示非常流畅。这种专业带赋予了他的演讲优雅、自信，又不失幽默风趣的风格。我也特欣赏他的气质（也许是白发的缘故？maybe...）&br&&br&Tim Cook 担任 CEO 后主持的数场发布会，除了开头、串场及结束，其余戏份都给了其他高管。Scott Forstall 被驱逐前，还与 Craig 分别负责 iOS 和 OS X 的介绍，Phil Schiller 介绍硬件新品。Scott 被驱逐后 iOS 也包办给了 Craig，使得他成为出场时间最多的一位高管。今年更是被厨子戏称为「Colleague Superman」。&br&&br&去年 WWDC 开始，之后到今年 WWDC 期间的数场发布会，Craig 主导的演讲风格明显加入了很多笑点，与现场观众很好的互动，活跃氛围，拿捏的也恰到好处。比如拿 OS X 的命名开刷，比如做 Demo 时偶尔的自黑，比如其他高管间的互相调戏（记得演示 iWork 在线协作时怎样恶搞 Eddy Cue 吧~看得我笑死了当时）。今年对 Jony Ive 的调戏尤其深得我心呐！看过《乔纳森传》的朋友肯定记得 Jony 的英国口音在念「Aluminum (铝)」这个单词的发音老是被吐槽（他念作「Al-lu-min-num」，美音念作「A-lu-mi-num」），Craig 模仿 Jony 在多数视频中介绍苹果产品的语气说了一句「Jony 那把铝质的勺子，金刚石打磨的完美倒角边缘（原话出自 iPhone 5 的官方宣传视频）」把我逗的乐死了233~~&br&&br&再多说点别的。Craig 于 09 年重返苹果，同年的 WWDC 他就登台做了 Snow Leopard 的 Demo 演讲。那年乔布斯病重，Phil Schiller 主持演讲。我也是从那一年真正开始关注起业界的（那年我大二~），然后恶补了几乎所有能找到视频资源的苹果发布会，以及之后每一场发布会也都不曾错过，有几场经典的百看不厌的节奏~
Craig Federighi 的演讲是除了乔布斯之外我认为最好的，也是我最喜欢的。应该说我首先很欣赏 Craig 本人，他风度翩翩又给人一种很平易近人的感觉，不像乔布斯那样有高高在上的光环，不像 Scott Forstall 那么傲娇（犀利的发着光芒的小眼神），Jony Ive 只适…
Matías Duarte where are you...&br&&img src=&/6caf8b8a47fc10ff730dbf1ef309c82d_b.png& data-rawwidth=&620& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&620& data-original=&/6caf8b8a47fc10ff730dbf1ef309c82d_r.png&&
Matías Duarte where are you...
更爱 Moto 360 了~&img data-rawheight=&2448& data-rawwidth=&3264& src=&/341bbeefcfb9c_b.jpg& class=&origin_image zh-lightbox-thumb& width=&3264& data-original=&/341bbeefcfb9c_r.jpg&&&br&&br&&img data-rawheight=&2448& data-rawwidth=&3264& src=&/cf63fb536_b.jpg& class=&origin_image zh-lightbox-thumb& width=&3264& data-original=&/cf63fb536_r.jpg&&&br&&br&&img data-rawheight=&2447& data-rawwidth=&3264& src=&/476b486a280b3b71877ecaae8e5b8f79_b.jpg& class=&origin_image zh-lightbox-thumb& width=&3264& data-original=&/476b486a280b3b71877ecaae8e5b8f79_r.jpg&&
更爱 Moto 360 了~
亲自演示给爸妈是最有效的方式。常用 App 都给装上，装一个演示一个，然后演示完了一些功能或用法后，马上让爸妈照着操作一遍，不要求快，既要有耐心，也要相信爸妈的接受能力，循序渐进。&br&&br&2012 年到现在，我就是这么教会了爸妈用 iPad、iPhone/Android 手机、Apple TV 和 Mac 的，而且家里爸妈用的 iMac 我甚至连 Windows 都没给他们装(之所以怂恿他们换 Mac 也完全是因为以前每次回家总得把家里电脑上的国产流氓软件清理一遍，还好爸妈在我多年的灌输下对新事物有较高的接受度，纯 OS X 也完全玩的转)，彻底把他们培养成果粉，哈哈~&br&&br&家里的第一台 iPad 2 是我爸公司年会抽到的大奖(爸你手气那么好为什么没有遗传给我-.-)；然后我工作之后给家里买了 Apple TV 和 iPad Mini 2，这样爸妈人手一台不会抢着用了。Apple TV 真是个好东西，那时候国内还没有现在这么多电视盒子，我妈现在只要用 iPad 看视频就要 AirPlay 到电视上了。&br&&br&不过说到这里还是有必要说一句，我自己是 Google/Android/Nexus 脑残粉，我眼中的 iOS 有无数槽点，但就算这样，iOS 设备和只运行 OS X 的 Mac 也是最适合爸妈这种年龄层的，大家都能省心，体验科技给生活带来的美好，而不是一天到晚要操心这些设备。
亲自演示给爸妈是最有效的方式。常用 App 都给装上，装一个演示一个，然后演示完了一些功能或用法后，马上让爸妈照着操作一遍，不要求快，既要有耐心，也要相信爸妈的接受能力，循序渐进。2012 年到现在，我就是这么教会了爸妈用 iPad、iPhone/Android 手机…
睡前正好刷到就来回答下吧~目测不会太严谨...&br&&br&要详细了解的话请看 Google 的官方文档中对于 DP、DPI 等概念的定义(需要科学上网): &br&&ul&&li&&a href=&///?target=http%3A///design/style/devices-displays.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Devices and Displays&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///design/style/metrics-grids.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Metrics and Grids&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///guide/practices/screens_support.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Supporting Multiple Screens&i class=&icon-external&&&/i&&/a&&br&&/li&&/ul&&br&简单来讲, 屏幕像素密度为 MDPI 即 160DPI 时, 1dp 为 1px. 更大的分辨率时, 在此基础上乘以一个倍数即可。下面是简易的换算, 以 16:9 的手机屏幕的尺寸大小为例:&br&&ul&&li&MDPI 对应分辨率为 640x360, 此时 1dp 为 1px&br&&/li&&li&HDPI 对应分辨率为 960x540, 此时 1dp 为 1.5px (当然现在这种 qHD 分辨率的屏幕几乎绝迹了, 可以忽略, 印象中第一款这个分辨率的手机是 Moto 的 Atrix)&/li&&li&XHDPI 对应分辨率为 , 此时 1dp 为 2px&/li&&li&XXHDPI 对应分辨率为 , 此时 1dp 为 3px&/li&&li&XXXHDPI 对应分辨率为 , 此时 1dp 为 4px (吐槽下, maybe 屏幕像素密度飙升太快了, Google 这么一个个地加 X 来命名真的是太草率了╰(￣▽￣)╮)&/li&&li&SP 的换算同&/li&&/ul&&br&建议设计时以 DP 为单位, 因为从 Android Design 到现在的 Material Design, Google 提供的所有官方指导文档、素材都是以 DP 作为单位的. 如果你用 Illustrator 或 Sketch 这样的矢量软件, 以 MDPI 为准, 放大/输出素材时候乘以上述相应的倍数即可. 用 PS 的话建议选择 XHDPI 作为标准.
睡前正好刷到就来回答下吧~目测不会太严谨...要详细了解的话请看 Google 的官方文档中对于 DP、DPI 等概念的定义(需要科学上网): 简单来讲, 屏幕像素密度为 MDPI 即 160DPI 时, 1dp 为 1p…
按题主的意思，最简单的办法就是在第一次进入该视图时显示一个『合理』、『优雅』的引导视图就 OK 了。注意括号内的词。可以找一些优秀应用作为参考。&br&&br&另外不结合具体产品设计凭空谈这一点没有意义，以及长按操作的对象不局限于图标、按钮，图片、文字，各种元素都有可能。手势操作，用户需要感到『自然』，因此不见得需要提示。Pinch to Zoom / Double Tap 有提示吗？没有。所以需要思考如何通过上下文情境，结合用户需要达成的目标，让用户自然地想到去『尝试』长按操作。
按题主的意思，最简单的办法就是在第一次进入该视图时显示一个『合理』、『优雅』的引导视图就 OK 了。注意括号内的词。可以找一些优秀应用作为参考。另外不结合具体产品设计凭空谈这一点没有意义，以及长按操作的对象不局限于图标、按钮，图片、文字，各种…
Andy Rubin坐在山景城的办公室里，看着屏幕，时不时露出招牌式的微笑。手机响了，画面上是Matias Duarte灿烂的笑容。&br&“你怎么看？” &br&“哥虽隐退江湖寥寥数日，却已然心无牵挂，让他们玩去吧。” &br&“也是，终究都图样图森破。” &br&“善。”&br& 挂了电话，望了眼桌上的R2-D2，微微一笑。&br&...&br&——老罗锤子ROM观后感&br&&br&&img src=&/cac97c6b29fbbe2a2f87f_b.jpg& data-rawwidth=&640& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/cac97c6b29fbbe2a2f87f_r.jpg&&
Andy Rubin坐在山景城的办公室里，看着屏幕，时不时露出招牌式的微笑。手机响了，画面上是Matias Duarte灿烂的笑容。“你怎么看？” “哥虽隐退江湖寥寥数日，却已然心无牵挂，让他们玩去吧。” “也是，终究都图样图森破。” “善。” 挂了电话，望了眼桌…
感谢&a href=&///people/b6fb0b7b9c680& data-hash=&b6fb0b7b9c680& class=&member_mention& data-tip=&p$b$b6fb0b7b9c680&&@黄继新&/a&老师的首赞&img data-rawwidth=&750& data-rawheight=&750& src=&/aa94ff20d748_b.jpeg& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/aa94ff20d748_r.jpeg&&&br&&br&当时还截图留念发了微博&br&&img data-rawwidth=&750& data-rawheight=&750& src=&/799d5b0adcda6f_b.jpeg& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/799d5b0adcda6f_r.jpeg&&
感谢老师的首赞当时还截图留念发了微博
会整首 Lose Yourself, 一部分 Without Me, The Way I am, Stan, Sing for the Moment, Like Toy Soldiers, Mockingbird, When I'm gone, Business, Hailie's Song, Beautiful...等等新歌老歌...&br&&br&&b&然而并没有什么luan用...╮(╯▽╰)╭&/b&&br&&ul&&li&对自己的英文发音以及语速略有自信才敢挑战...要听个练个上百遍(literally上百遍), 练 flow, 断句, 断词练得舌头打结...还是不可能完美还原...然并luan x 1&br&&/li&&li&练听力练口语? Lose Yourself 的副歌为了 flow 把一句句子断成 Lose yourself in the mu- | -sic the mo- | -ment you own- | -it you better never let it go...这样...完全不是正常的断句和连词...然并luan x 2&/li&&li&去KTV里秀？根本没有(有也是很搓得你根本唱不出来的伴奏- -)...然并luan x 3&br&&/li&&li&装13秀一把？会忘词会唱错然后被嘘爆了...然并luan x 4&/li&&li&不会 freestyle (太烧脑子了好么不是纯正歪果仁根本想不出那么多话还得押韵还得想好 flow 还得唱得有腔调简直不可能好么...), 会再多姆爷的高难度 rap 也是白瞎...然并luan x 5&/li&&li&etc...然并luan x N&/li&&/ul&总之就是然并luan...
会整首 Lose Yourself, 一部分 Without Me, The Way I am, Stan, Sing for the Moment, Like Toy Soldiers, Mockingbird, When I'm gone, Business, Hailie's Song, Beautiful...等等新歌老歌...然而并没有什么luan用...╮(╯▽╰)╭对自己的英文发音以及语…
一图流~&img data-rawheight=&1334& data-rawwidth=&750& src=&/4b7abbf548b_b.jpg& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/4b7abbf548b_r.jpg&&
做为一只 UI/UX 设计狗，我跑个题简单说下我对朋友圈的理解。（不小心扯的有点多...TL; DR...）&br&&br&先来一发截图：&br&&img src=&/796be964_b.jpg& data-rawwidth=&750& data-rawheight=&282& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/796be964_r.jpg&&&br&&b&朋友圈的「初心」&/b&&ol&&li&语言切换到英文，可以看到朋友圈被翻译成了「Moments」，它的图标则是镜头的光圈。这样的情境下再转译成中文，是不是用「时刻」会显得更为贴切些呢？有「Capture the moments of your life」的隐喻在里头。&br&&/li&&li&再来看朋友圈的发布功能。朋友圈默认只提供了发图片的功能，发纯文字需要长按相机图标。本身长按就属于一种很隐性的操作，而长按一个功能的图标出现另一个功能则更是非常反直觉、不符合常规的设计，我的第一条朋友圈就是吐槽这个设计的！（关于长按的可用性也有很多讨论，不再赘述）。但后来当我意识到上面第一点中提到的图标和英文翻译，不难看出朋友圈是刻意而为之的，并非拿不出更好的解决方案而妥协的设计。朋友圈试图通过这样的设计去引导用户发带有图片的内容，让朋友圈里的内容能够更生动。「Pictures speaks louder than words」（带图的内容比纯文字更容易骗赞骗回复有没有！）&br&&/li&&li&最后来说说转发和分享。做为微信这个即时消息类应用中的社交功能，朋友圈没有人人、微博这类社交产品中常见的转发机制。针对原创内容的转发只能复制黏贴，针对分享内容的转发则是进入内容后再重新分享，两者在朋友圈 timeline 上呈现出来的形式都像是用户自主发布的原创内容。再一次，朋友圈试图通过这样的设计去引导用户发布原创内容分享给朋友。&/li&&/ol&归纳起来就是：&b&Capture the moments of your life. &/b&&b&Share your moments with friends you love. &/b&&b&抓住并分享人生中的美好时刻，用心感受生活。&/b&&br&&br&以上，我想也许是微信做朋友圈这个功能的初衷吧（这么文艺一定不是企鹅本身的想法......）&br&&br&&br&&b&残酷的现实&/b&&br&随着微信开放了公众号，随着越来越多功能的加入，随着所有人几乎都开始用起了微信，你的微信通讯录也从最初的几个朋友变得鱼龙混杂了起来，朋友圈里出现越来越多的低级营销、鸡汤、谣言，这些似曾相识的内容从 Qzone 转战到微博最后又在朋友圈卷土重来。当分组、屏蔽、拉黑这些功能的使用频率越来越高，朋友圈再也不是其英文翻译下还有点小文艺的「Moments」了，而是沦为了一个圈(juan)，圈养了各色的人，呈现着各色的生活。&br&&br&朋友圈 (juan) 背离了真正把它当成朋友圈 (quan) 来使用的用户们的意愿，对这个世界美好的向往激发里了内心的防御机制（这种心态也并不完全是很矫情的玻璃心），朋友圈被喷也是再自然不过的了。我也喷过，不止一次。&br&&br&朋友圈变成被很多人喷的这个样子，其实并不怪朋友圈本身。好比「任何一个可以用来约炮的社交产品都会被用来约炮」，这些社交产品本身又没有显性的约炮功能，完全是用户的自发行为，你能怪这些产品本身不？并不能。同样，任何一个可以用来搞营销、发鸡汤、传谣言的地方就会被用来做这些事情，从 Qzone 到微博到朋友圈，再到下一个所有人都会去用的产品。&br&&br&&br&&b&Affordance - 可供性&/b&&br&&img src=&/efa37abb8377eff51a41e3f2ed8e2589_b.jpg& data-rawwidth=&1200& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/efa37abb8377eff51a41e3f2ed8e2589_r.jpg&&&br&由此我想到了 Affordance - 可供性这一理论。Affordance 通过日常生活中的现象来阐述人们在一个特定环境/情境中必然会产生的无意识的行为，从认知科学的角度解读，并以此反思设计的本质。（推荐阅读 &a href=&/question/& class=&internal&&认知科学和设计领域中的 Affordance 是什么？&/a&&a data-hash=&55ff9b7864ecd46dd7d8& href=&///people/55ff9b7864ecd46dd7d8& class=&member_mention& data-editable=&true& data-title=&@Hi-iD& data-tip=&p$b$55ff9b7864ecd46dd7d8&&@Hi-iD&/a& 老师的回答）&br&&br&上面这张照片是我拍的。按这个世界的运作逻辑，这个可乐罐作为垃圾应该被扔进垃圾桶里，可现实中，垃圾在垃圾箱以外的地方也到处可见，而我拍照的这一时刻，它被放置在路上这根竖起的柱子上，因为柱子的横截面&b&恰好&/b&能放置这么一个罐子。我所想到的是，朋友圈中被我们喷的那些营销、鸡汤、谣言，这些糟粕如同喝完的可乐罐就是垃圾一样，应该被筛选、被淘汰掉，然而并没有，并且日常生活中也是随处可见：无脑的电视营销节目、机场书店里躺着的成功学书籍、广场舞大爷大妈口口相传的养生理论。而在现代社会中，互联网就如同照片中这一时刻的柱子那样，&b&恰好&/b&为这些东西提供了一个生存、传播的渠道，所以它们也必然会在互联网上传播，朋友圈作为一个互联网产品，也必然会被这些东西入侵进来。&br&&br&&br&&b&喂喂喂，跑题扯了那么多，差不多该结尾了吧...&/b&&br&上面说了，我也喷过微信的种种在我看来看似不合理的设计、喷过朋友圈中大家都唾弃的糟粕内容，也曾经试图想弃用微信。但是微信给生活带来的便利，是远远超过朋友圈上的那些糟粕所带来的负面影响的，所以现在我不喷了，我选择不去理会，我会善意地提醒父母不要去转发这些内容，我会关注我所关心的朋友们的动向，我清理了自己发过的朋友圈，删掉了所有转发、分享以及吐槽的内容，只保留那些美好、充满正能量的时刻，回归使用朋友圈的初心。
做为一只 UI/UX 设计狗，我跑个题简单说下我对朋友圈的理解。（不小心扯的有点多...TL; DR...）先来一发截图：朋友圈的「初心」语言切换到英文，可以看到朋友圈被翻译成了「Moments」，它的图标则是镜头的光圈。这样的情境下再转译成中文，是不是用「时刻」…
好好做 UI, 当什么产品狗 ╮(╯▽╰)╭
好好做 UI, 当什么产品狗 ╮(╯▽╰)╭
已有帐号？
无法登录？
社交帐号登录}