君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
知乎体验分析报告(android版)
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口怎么评价知乎（2015 年初）的 UI 与交互设计？
我的图书馆
怎么评价知乎（2015 年初）的 UI 与交互设计？
（转载请经本人私信同意，并标明“来自胡痴儿”）我梦中的知乎是这样的好了言归正传=_=如何深入解读一款产品？以知乎为例：我试着从web、ios和Android三种操作环境，可用性、易用性、爱用性三个维度，对比其竞品quora作答一、如何欣赏知乎？第一眼→ →沉静而寒冷的知乎思考：视觉要符合所处的环境，其次才是品牌色。鲜艳的高冷的大块蓝色只适合首页，内容页则以黑白灰为主色调以突显信息本身，但是完全素色的界面又显得死气沉沉。可以在控件反馈样式上使用蓝色，让蓝色使界面更有个性的同时不抢内容。我们欣赏一下知乎app的展示web强化重点，弱化周边quora的情绪quora的红，红得发欢，冲击着我的视网膜那种醇郁的朱红，是一种精神的仪式，一种炙热，一种成熟二、知乎的网站结构知乎网站的信息架构树形结构图深广度平衡培养用户使用情景的思维方式知乎没有凸显提问模块quora把提问放得非常明显悬浮点赞窗，点击其他区域关闭2.知乎的导航知乎的全局导航过于明显，分散了用户的注意力，那么大一团拟物蓝=_=quora比较值得学习知乎的抽屉导航场景：优势：劣势:&quora的上下tab导航场景：优势：劣势:3.知乎的栅格quora的看回答点击内容区域文字第一次被展开再点击内容区域→文字完全展开告诉你上次翻到了哪里纵向浏览的信息流点击问题进入回答后下拉3.知乎怎样转移焦虑情绪？前提：用户反感漫长的等待，让心情变坏，影响情绪（1）用户关注的焦点从等待转移到一个趣味的画面、一句简短的文案（2）缩短用户心理等待时间：页面载入的进度反馈发布答案的加载动画——保持积极响应细节：结果提前呈现，随后实现用设计掩护程序的响应速度，让用户感觉到在使用时是流畅的。告诉用户为什么要在这里提交内容如quora的问和答里——“快去提问吧，等有答案的时候我们将会告诉你的！”“开始在quora上写然后看多少人看过你的内容。”iosandroid五、浅析知乎的文字及排版——适合老年人查看的字体和样式夜间模式背景白色是全频光，全放射光对人眼睛的最有刺激浅色模式时，使用乳白色、浅灰色、淡黄色的纸张提高：带有纸张纹理的背景长时间阅读舒适度最高。
为了让用户有效使用，降低用户辨识时间，必须保证清晰度（1）饱满（2）简洁（3）字的长宽比饱满无称线的字体清晰简洁，无需花费额外的时间加以辨认Fontcolor: #444444 / 68,68,68Background: #F7F7F7 / 247,247,247size: 18pt行长不会超过40个汉字。文本宽度控制在450-700px为宜，此范围内参照字号大小；胡痴儿数了数间距对于知乎这种篇幅长且偏学术的比较枯燥的文章：Fontcolor: #979D9F / 151,157,159Background: #1D1F21 / 29,31,33size：18sp六、知乎的搜索框运行结构：知乎for ios的“搜索”——持续式搜索假如没有搜到相关问题和回答可以“添加问题”知乎for Android的“搜索”——可扩展搜索假如没有搜到相关问题和回答怎么办？quora for ios的“搜索”——可扩展搜索quora for Android的“搜索”——可扩展搜索如何优化知乎目前的搜索体验？提供语音搜索功能Pre.搜索前，显示cookies（搜索历史）、搜索建议ing.搜索中，即时匹配，输入时提供即时数据根据用户输入的字来判断用户是搜索问题还是用户七、知乎的用户体验金字塔根据不同的用户定制产品操作入口同一界面不同用户需求用户维度的划分新手和中间用户都会变成资深用户每种用户都有不同目的，那么他们的共同目的是什么？（定性研究和定量分析）思考：逐步完善1.有效性——基础体验建设（可用）色盲（8.65%的男性用户和0.43%的女性用户）眼里的知乎和quaro如果把它当做一幅素描，会发现他画灰了，知乎的字体和明度所形成的对比度明显不够
建议：使用形状+色彩的信息提示夏至日中午坚持刷知乎和quora近视眼和弱视眼里的知乎和quora坐在颠簸的车上的人眼里的知乎和quora坐在加速的火箭里的人眼里的知乎和quora2.高效性——优化升级体验（易用）图标语义优化降低用户使用和学习成本突破点：从用户痛点出发图文结合，加入文字指示3.满意度——用户深层需求满足（爱用）满足使用需求→满足心灵需求案例：刘看山让错误成为不可能。很美好。404基于用户心里模型，而非工程实现模型随便看看八、知乎有哪些不足？quora是怎么做的？该怎么学习和改进？界面风格不统一web端是拟物蓝color: linear gradient* 0% - #0E7BE4 / 14,123,228* 100% - #006CBB / 0,108,187border: #006CBB / 0,108,187移动端是扁平蓝color: #0077D9 / 0,119,217渐变+阴影shadow:* x & y - 0px, 2px* blur - 4px* #CCCCCC / 204,204,204 (60%)胡痴儿按这里还是有值得学习的地方：但，这里quora的流程非常顺畅操作入口出现的时机是适宜的这里值得学习的地方——简化操作方式不足：改进建议：遇到Input Box的控件操作入口正常&鼠标停留鼠标按下视觉不明确：我们看看quora的按钮：正常鼠标停留鼠标按下quora有哪些地方值得知乎学习？横屏避免用户出错给用户行为约束——封闭掉不正确的道路比如这一位，明明把我拉黑了，却显示在我的“你可能感兴趣的人”里然后我点击关注——建议：模态弹窗的反馈，打断了任务流谁也不能保证所有人都可以准确无误地走完一个流程，我们来看看这个失败的弹窗：模态弹窗很不友好，用户在填写问题时可能会被打断三次，所以降低了用户的参与度。建议：适时地给用户相应的帮助我们来看看quora是怎么做的？　　quora采用了Toast list的方式，提醒纠正，非模态的处理，让流程更加顺畅和轻松自如。细节：黄色代表警告，绿色代表成功假如我的问题不存在就自动添加问题入口信息不明确1.无论点击我的主页还是我的头像和名字都进入“我的主页”2.消息流的“被评论”热区只有web端可以跳到被评论上ios和Android的三个热区胡痴儿按：劳资就是想看谁评论了我啊啊啊啊告诉用户是什么告诉用户怎么作才能完成整个流程未激活按钮的设计——拉得不够开预设用途：一个界面或者控件，要让用户一看见它就知道如何使用知道这个控件可否操作”激活”和”未激活”两种状态而目前处于”未激活”状态的按钮呈不可操作的视觉效果（比如灰色）可点赞和不可点赞对比区分不够明显隐藏部分功能quora，按步骤拆分的用户教育——通过明确的步骤性的引导用户如何操作结果呈现给予正向鼓励给予用户必要的预判性错误提示——告诉用户，这样走可能会错当用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。胡痴儿按：黄得漂亮（发灰），太他妈文艺了！quora胡痴儿按：黄得正，起到了警示的作用！对登录流程进行优化通常的登录和注册是分开设计的如果将登录和注册整合每一步骤都只有一个表单注册和登录没有任何冲突这样避免了”用户已存在”然后又要重新填写表单的不良体验在流程上有很大的优化优秀案例：登录时，以为没有注册，遂跑去注册注册时，又提醒你已注册，直接登录设计规范不同于一般的48dp的韵律，知乎用的56dp间距为16dp参考quora标题应右退11dp汉堡按钮应左进2dp搜索输入框应拉长16dp赠诗一首《致知乎》——如果找工作是追女孩，投简历是一次表白那么知乎一定是我当初暗恋的女孩。当年，没任何工作经验的我见到人生中第一家心仪的公司——知乎我那么在乎这家公司和它的产品甚至可以忍受廉价的工资可是我的简历还是被扔到垃圾桶里我投了一千份简历，全部石沉大海没有回音……像我的爱情：没任何感情经历时我第一次见到心仪的女孩我要把身上和脑袋里所有美好的事物都和她分享但，她拒绝了纯洁的我……我的老师——知乎，你的学生胡痴儿，敬上。我要开始用我的知识反哺你了！&赞同64反对，不会显示你的姓名手机上跳不到新的评论，电脑上@不到想要的人。&赞同103反对，不会显示你的姓名我只说两个痛点。第一，锁屏状态下通知推送提示有人评论，解锁后不是直接跳到该评论，而是需要手动点开评论。拉到最后一个评论才能看到。如果评论比较少还好，评论多了简直就是要把屏幕搓烂的节奏好么？？你特么确定这不是在逗我？？！！第二，手滑点了感谢竟然取消不掉。感谢放到那个地方很容易误触好么？？？如果答主的观点和自己不一致还点了感谢简直比吃了苍蝇还恶心。&法克。就这两个痛点我觉得知乎的交互设计就像狗屎一样。我就不信没人点赞。知乎今天更新了！！！！太棒了！！！爱你，黄继新！！！么么哒！&赞同24反对，不会显示你的姓名我来说两点我个人感觉很别扭的吧：1，当用户只有一个收藏夹时，点击某个答案的收藏按钮，会弹出这么一个弹窗……说真的，我真的百思不得其解，接下来该如何操作呢？怎么才能把我要收藏的答案塞进我的收藏夹？点“关闭”？感觉不是……点“创建收藏夹”？肯定不是了。难道是直接点击右上角的×？我脑子有坑？挪了半天鼠标才发现收鼠标在藏夹这个框框里时，有一个略微变灰的反馈，我试着点了一下……我擦！原来如此！整个界面没有任何隐喻引导用户点击这里，也没有用户熟悉的“确定-取消”的体系，而是一个长得不像按钮、也没有空位置标识的复选框……尤其对于只有一个收藏夹条目的用户来说，是多大的悲剧啊！纵使我第一次学习了这一交互之后，以后很多次点开收藏，我都要第一下先迷糊一下……茫然的想，接下来我该点哪？2，登陆页填写验证码。在某些你异地登陆或连续输错密码时，知乎会让你填写验证码……而这个页面，更是让我栽了无数回。第一眼一看，哦，验证码，异常登陆了。tpTi，填吧。点击下面拟物凹陷的、里面写着“请填写验证码”的文本框，咦？怎么怎么点都没反应？Chrome又崩溃了（咦？我为什么要说又？）？ 电脑假死了？狂点鼠标左键半天才发现，哦……原来验证码输入框TMD在验证码的上方……为毛一个提示长得那么像输入框啊！！！还拟物凹陷抢夺视觉重心啊！！！既然你的输入框里已经有默认文字“验证码”三个字了，为毛还要单独列出一个提示费二遍事啊！！！为毛验证码的输入框会出现在验证码上方啊！！！我想个傻【哔】一样狂点鼠标左键还又把锅甩到Chrome上啊！（咦？我为什么要说又？）我冷静下……&赞同5反对，不会显示你的姓名中规中矩，达成了产品目标，在中国我们称之为“好的设计”，我是说 iOS 版。Android 版在“设计”上有些刻意的痕迹，用的不多。&赞同2反对，不会显示你的姓名说说Android客户端。知乎推出更新版本的Android客户端指日可待。As we know，&&是Android设计规范的践行者，因此我们几乎可以肯定下一个大版本的知乎会散发着浓厚的Material Design风味。而在这次改版中，我们将会看到的最明显的改变将会是视觉设计。这样说来，在现在这个时候如果要评价现有版本的视觉设计，我会觉得有点不合时宜。但评价交互设计还是可以的，相对于视觉规范，官方文档中的交互规范篇幅会小很多。而且APP形态千千万，Google很难在一个文档里为所有开发者想好了所有场景下的最恰当的呈现方式。所以很多细节上的抉择都可以脱离文档进行权衡，比如下面几个问题。首先是滑动返回（手势返回）。Material Design没有关于滑动返回的设计建议。综合来看，滑动返回的利弊似乎均衡。利：弊：如果我们遇到无法明确分辨高下的两个选择，那最好的方式是问喜欢的妹子想要哪一个，或者创造第三个选项。就个人而言，我是非常希望下一个版本的知乎保留滑动返回的，但我同时希望那是不一样的滑动返回——所谓的第三个选项。我虽然有一些想法，但比较潦草，所以还是不必说了。第二个问题是很多人提到的，无法在消息页面中直接跳到特定评论。所以如果碰到评论上百的回答，即使有人回复了我的评论，我都是要来到网页端才去看。这个问题的出现至少得追溯到2个因素：私以为，解决这个问题最好的方式是更改分类维度。其实简单来说就是，把5个Tab合并成3个——当然不是像现在这样合并。其中一个思路是按信息流动的方向分类：第三个问题是投票按钮。要注意，这不是视觉设计范畴。现在的投票按钮是一个“赞”的图标，点一下才是真正的投票。这个按钮的问题非常明显（反馈的信息与实际指向的信息严重不相符），我猜从一开始选用这个按钮的原因可能有两个：因为投票是评价用户参与度的重要指标，选用指向性强的图标有利于激发用户参与的欲望；没有更好的图标了。我第一次认真开始思考这个问题是一年前，当时我觉得的确没有更好的图标了，这样也没事。但现在我却认为这个问题需要尽快解决。除了因为越看越不爽、越看越觉得心里有疙瘩之外，还因为我觉得知乎是时候开始削弱对“投赞同票”的引导了——可以继续引导投票但不能再引导投赞同票了——太多并不那么优秀的答案拥有着不相称的票数。要知道，现在的投票按钮给人的暗示是“点赞”（引导着投赞同票），而想要投反对票的人需要先“点赞”再点“反对”（反对票躲在厕所里表示被严重歧视了）。解决这个问题，要么换一个图标，要么不放图标。或者文字按钮也挺好的。虽然直觉告诉我，最后的结果都不会很完美。------------------暂且只说这3个问题，因为我觉得这3个问题在下一版本可能还未能解决。在这里说，也算是表达一种期望。另外，中规中矩的设计形式对知乎其实是最适合的。&赞同2反对，不会显示你的姓名谁提问的？回复自己的评论不能直接跳，要自己翻。&赞同8反对，不会显示你的姓名怎么评价Quora的UI与交互？哦，不好意思，Quora改版了...怎么评价人人的UI与交互？哦，不好意思，Facebook改版了...&赞同11反对，不会显示你的姓名1感谢 分享 收藏 没有帮助 举报按钮 太多了，还有 谁能告诉我 感谢和赞同的区别？？为什么不能使 向下按钮 撤销赞同的功能 等同于 没有帮助、2.右上角那边 个人信息 鼠标悬停出现， 消息 为什么要单机后 出现。很不习惯。 消息整合在个人信息里也是可以的吧。3.用了很长一段时间我才明白 要看较热门信息 点话题 看刚出现的问题点发现。 用户学习成本太高了。4.用户主页中，头像为什么不能显示大图？&&你对得起那么多美女知友么！！5. 还有很多 在同一页面 功能相互重叠的按钮.....&赞同1反对，不会显示你的姓名0404更新之前排第一那个睁眼说瞎话的自己删答案了 大快人心以下为之前回复跟谁特一样目测排第一的答案都被踩出谁特了，真不要连&赞同1反对，不会显示你的姓名没有帮助按钮的位置简直不能忍，左手单手使用的情况下常常会出现误点没有帮助。为那些我误触没有帮助的答案默哀最后，说这么多，他们改嘛？客户端还是那么难用，手机写答案网络不顺畅就各种丟，回复评论翻到手软。安卓现在的这个版本多久没更新了！&赞同1反对，不会显示你的姓名ios客户端的搜索感觉十分捉急。比如无法直观地看到每个提问的关注量和回答数，一般我们都会先点回答多的问题嘛。可是如图，这些一看问题本身就觉得不靠谱的却占据前列。&赞同4反对，不会显示你的姓名每次展开答案或者评论之后我就再也找不到收起了。&赞同3反对，不会显示你的姓名我个人灰常讨厌知乎的iOS客户端，太尼玛难用了，上次在回答问题的时候。我写了一长串，然后点发布，谁知道无线掉了，然后一直发不出去，既然发不出去，不会弄到草稿箱里吗？然后我把知乎关了，重新打开，发现没弄到草稿箱，顿时想死的心都有了，还有，我一直觉得，知乎的手机客户端居然没有自己关注的话题下的问题推送，取而代之的居然是发现下编辑的推荐，编辑大大，你晓得我们对神马感兴趣不，瞎推荐…还有新版的iOS启动前居然有一段时间的黑屏，不知道是不是我手机特有的还是大家都这样，还不如原来的版本呢。总之，手机客户端不人性化，知乎的网站好几年了都没怎么变过，都不知道知乎是不是请不起前端工程师了。知乎还没有wp客户端呢吧&赞同2反对，不会显示你的姓名怎么没有人说电脑版答案的字体和所占的版面都很小，看长文章很累。&赞同2反对，不会显示你的姓名我主要说下知乎APP（安卓平台）UI： 选择象征互联网的蓝色为主色调，登录界面大幅蓝色为底，主界面header-bar为蓝色 ，其余白色居多，中规中矩，缺乏可陈。交互： 1.导航框架：原先的tab标签式改成了现在侧滑抽屉式我认为是进步，这一举措增加了阅读面积，而且并没有对用户的操作带来多少繁冗，毕 竟发现、话题之类的切换并不是高频次的操作，而且知乎整体的交互层级并不深，所以没必 要使用占可视面积的tab式2.信息架构：...= = 以上 我看啥时来填坑，先说重点知乎是UGC问答社区，C content是UGC社区的核心，这就注定了UI和交互设计的优先级远远低于内容运营，题主如果问问如何评价知乎的运营应该更能获得一些干货。但也并不是说UI和交互不重要了，知乎的UI以上已经评价，交互我要吐槽吐槽，既然是以内容为核心的社区，交互也应该围绕两点来来展开：1.让用户更快获得想要的内容 2.让用户更方便地产生内容。 知乎的搜索体验和移动端回答排版的体验我相信不用我多说了...&赞同1反对，不会显示你的姓名差劲……&赞同1反对，不会显示你的姓名我看了一会儿下面的答案想回答这个问题，发现居然还要拉回top&赞同2反对，不会显示你的姓名能把侧滑的交互改了么？难用死了。&赞同0反对，不会显示你的姓名知乎- 与世界分享你的知识、经验和见解知乎，一个分享的平台，从产品的角度出发便是需要满足用户快速分享和创造知识的接口，并且不断优化該要点。很遗憾的是，IOS客户端上这个要点做的不是很好，（android没有用，不发表任何观点）。一个好的产品，关键在于产品的核心是否能满足其用户的某一个需求，知乎做到了，满足了用户对知识分享与创作过程。另一个方面便是产品需要注重细节，不断优化整个产品的体验，而不是随便搭个框架就完事的那种。以上只是斑点的个人见解，希望轻喷...我读书少，别扯大观点骗我!
馆藏&29753
TA的推荐TA的最新馆藏[转]&[转]&[转]&&nbsp&#8250&nbsp&nbsp&#8250&nbsp
React Native for Android 实践 -- 实现知乎日报客户端
原文出处：&React Native for Android 的发布，对一个 Android 开发者来说还是有相当的吸引力的。通过前面这篇博客：好不容易入了门了，然后想找一个简单的项目，来练练手。一方面来熟悉一下 RN（React Native, 后面都做此简写），另一方面来验证使用 RN 来实现一个相对完整的项目的可行性。平时用的最多的客户端之一：知乎日报，这个 APP 相对简单，而且也找到了有人分析的。就选择它了：实现一个 React Native 版的知乎日报客户端，目标是尽量实现官方客户端一致的效果。这篇文章主要讲使用 RN 来实现知乎日报客户端的可行性和实现方法。整个项目开源在 GitHub 上：，欢迎 Star 和 PR。基本概念这里以我的个人理解，快速过一下 React Native 中一些基本概念。如果和官方的理解有些偏差，还请指出。1. 组件React Native 主要是通过 Virtual Dom 来实现显示页面或者页面中的模块。可以通过&React.createClass()&来创建自己的 Dom，在 React 中称之为组件（Component）。创建之后，就可以直接像 HTML 标准标签一样使用了。如下：var&MyCustomComponent&=&React.createClass({
//&然后就可以这样使用
&MyCustomComponent&/&到底什么是一个组件？我的理解就是页面上的一个逻辑单元。组件可以小到一个按钮，也可以大到整个页面，组件嵌套组合，就成了各种复杂的界面了。2. 组件生命周期类似于 Android 中的一个 View，它也有自己的生命周期，有自己的状态。React 组件的数据保存在自己内部的&state&变量中。每个组件都有自己的生命周期，每个生命周期都有对应的回调，这个和 Android 中的 View 非常类似：getInitialState：获得初始化组件状态，只调用一次componentWillMount：组件将要加载，只调用一次componentDidMount：组件加载完成并显示出来了，也就是完成了一次绘制，只调用一次render：绘制组件，可能调用多次。具体要写自己的页面的话，要从哪里入手呢？我们这里就要来看一下&React.createClass()&是什么的。这个方法可以辅助你创建一个组件，其中传入创建组件的参数，就是自定义组件需要的内容。一个基本的自定义组件写法如下：var&MyCustomComponent&=&React.createClass({
//&这里返回一个对象，设置组件的初始化状态，
//&后面就可以通过&this.state&来获得这个对象
getInitialState:&function()&{
key1:&data1,
key2:&data2,
//&这里一般做一些和界面显示无关的初始化操作
componentWillMount:&function()&{
//&这里一般做加载数据的操作
componentDidMount:&function()&{
//&这是最重要的函数，用来绘制界面，
//&所有的自定义组件，这个函数是必须提供的
render:&function()&{
});一个自定义组件基本上就是上面那样定义了。只有&render&函数是必须的，其他都是可选的。3. 组件的数据绘制界面部分，一般情况下会根据组件的状态&state&来绘制动态页面，例如下面一个最简单的例子：render:&function()&{
&Text&{this.state.key1}&/Text&
}这里就是直接把状态中的&key1&的值用&Text&组件直接显示出来。另外，React 组件中最重要的一个概念就是&state&C 组件的状态。除了前面的使用&getInitialState&方法来设置初始化状态外。在界面逻辑处理或者事件交互的过程中，可以调用this.setState(...)&方法来修改组件的状态值。如果在代码中直接修改&state，React 就会把旧状态和新状态做一个 diff，找到变化的部分，然后对应找到和这个变化的值关联的界面部分，请求重新绘制这个部分。例如刚才的例子中，如果调用：this.setState({key1:&'Hello&world!'});界面上的&Text&内容马上就会显示出&Hello world!。组件中还有一种数据：属性（Property），这种数据可以通过&this.props&来直接获取，例如非常常见的&View&style={{flex:&1}}&这里的&style&就是 View 这个组件的一个属性。那么属性(props)和状态(state)两种数据有什么区别呢？一般&属性&表示静态的数据，组件创建后，就基本不变的内容，状态&是动态数据。4. React Native 布局关于 React Native 的布局，实用的是 FlexBox 实现，类似网页的 CSS 布局方法，具体可以参考官方推荐的&&和官方文档&。关于布局说起原理比较简单，但是要很灵活的写出你想要的样式，还是需要慢慢积累经验。另外，值得一提的是，React Native 中的样式长度单位，是逻辑单位，概念和 Android 中的&dp&一样。以上就是 React Native 的基本逻辑，有了这些概念，我们就可以开始写 APP 了。APP 开发实践我们要实现的知乎日报的 APP 的主页面是一个文章列表，左边可以滑动出来抽屉，账号信息和显示主题列表。选择主题列表，可以在列表页更新对应主题的文章列表。点击文章列表进入文章详情。还有评论，点赞，登录等功能初期并不计划做。1. 抽屉的实现庆幸的是，官方提供了&&组件，这个组件其实就是对 Android 中的&DrawerLayout&的封装。可以参考官方文档，使用过 Native 版本的&DrawerLayout&话，很容易上手这个组件。主要代码如下：render:&function()&{
&&return&(
&DrawerLayoutAndroid
&&ref={(drawer)&=&&{&this.drawer&=&&}}
&&drawerWidth={Dimensions.get('window').width&-&DRAWER_WIDTH_LEFT}
&&keyboardDismissMode=&on-drag&
&&drawerPosition={DrawerLayoutAndroid.positions.Left}
&&renderNavigationView={this._renderNavigationView}&
&&&View&style={styles.container}&
&&&&{content}
&/DrawerLayoutAndroid&
}其中&renderNavigationView&属性，表示抽屉里面显示的内容。本项目的实现，可以参考：。2. 主页文章列表文章列表在 Android 可以用&ListView&实现，React Native 也很贴心提供了对应的组件&。实用方法和 Android 原生的也类似，需要提供一个数据源&dataSource&和一个基本的绘制每行界面的函数。借用官方的一个代码片段：getInitialState:&function()&{
&&var&ds&=&new&ListView.DataSource({rowHasChanged:&(r1,&r2)&=&&r1&!==&r2});
&&return&{
&&&&dataSource:&ds.cloneWithRows(['row&1',&'row&2']),
render:&function()&{
&&return&(
&&&&&ListView
&&&&&&dataSource={this.state.dataSource}
&&&&&&renderRow={(rowData)&=&&&Text&{rowData}&/Text&}
},这是一个最简的 ListView 使用的例子。其实，React Native 提供的 ListView 比原生还要强大一些，提供了列表的&Section&的支持，列表可以分节，可以显示每节的头部，这个和 iOS 的 UITableView 类似。因为知乎日报的文章列表是按照日期分 Section 的。具体的使用方法在官方的例子&UIExplorer&中有例子。问项目中可以参考这个文件:&。3. 详情页的实现知乎日报的文章详情页是使用一个&WebView&显示内容的。遗憾的是，React Native 官方在 Android 上并没有提供 WebView 的支持。好在 React Native 很容易集成原生的组件：。我就按照官方文档，导出一个 React 的 WebView 组件。Java 端的代码如下：public&class&ReactWebViewManager&extends&SimpleViewManager&WebView&&{
&&&&public&static&final&String&REACT_CLASS&=&&RCTWebView&;
&&&&@UIProp(UIProp.Type.STRING)
&&&&public&static&final&String&PROP_URL&=&&url&;
&&&&@UIProp(UIProp.Type.STRING)
&&&&public&static&final&String&PROP_HTML&=&&html&;
&&&&@UIProp(UIProp.Type.STRING)
&&&&public&static&final&String&PROP_CSS&=&&css&;
&&&&@Override
&&&&public&String&getName()&{
&&&&&&&&return&REACT_CLASS;
&&&&@Override
&&&&protected&WebView&createViewInstance(ThemedReactContext&reactContext)&{
&&&&&&&&return&new&WebView(reactContext);
&&&&@Override
&&&&public&void&updateView(final&WebView&webView,&CatalystStylesDiffMap&props)&{
&&&&&&&&super.updateView(webView,&props);
&&&&&&&&if&(props.hasKey(PROP_URL))&{
&&&&&&&&&&&&webView.loadUrl(props.getString(PROP_URL));
&&&&&&&&if&(props.hasKey(PROP_HTML))&{
&&&&&&&&&&&&String&html&=&props.getString(PROP_HTML);
&&&&&&&&&&&&if&(props.hasKey(PROP_CSS))&{
&&&&&&&&&&&&&&&&String&css&=&props.getString(PROP_CSS);
&&&&&&&&&&&&&&&&html&=&&&link&rel=\&stylesheet\&&type=\&text/css\&&href=\&&&+&css&+&&\&&/&&&+&
&&&&&&&&&&&&}
&&&&&&&&&&&&webView.loadData(html,&&text/&charset=utf-8&,&&UTF-8&);
}这里我导出了一个简单的 WebView，并暴露了&url,&html,&css&三个属性。url&表示网页要显示的网页地址，html&表示要加载的 HTML 字符串，&css&表示网页样式链接。还要注册这个ReactWebViewManager&到&ReactInstanceManager&中。具体代码可以看&&和&在 JS 端，需要做对应的封装：class&ObservableWebView&extends&ponent&{
&&render()&{
&&&&return&&RCTWebView&{...this.props}&onChange={this._onChange}&/&;
ObservableWebView.propTypes&=&{
&&url:&PropTypes.string,
&&html:&PropTypes.string,
&&css:&PropTypes.string,
&&onScrollChange:&PropTypes.func,
var&RCTWebView&=&requireNativeComponent('RCTWebView',&ObservableWebView,&{
&&nativeOnly:&{onChange:&true}
module.exports&=&ObservableWebV然后就可以在 React 中使用了，如下：var&MyWebView&=&require('./WebView');
render:&function()&{
&&&&&&&View&style={styles.container}&
&&&&&&&&&MyWebView
&&&&&&&&&&style={styles.content}
&&&&&&&&&&html={this.state.detail.body}
&&&&&&&&&&css={this.state.detail.css[0]}/&
&&&&&&&/View&
}这样就能直接显示了网页内容，挺出乎我意料的简单。还有一个细节，官方客户端，随着 WebView 的滑动，头部的 Image 也跟着往上收起来。这里我们就要监听 WebView 的滑动事件，然后来设置头部的 Image 的跟随移动。还好，官方文档也提供了一个可以方便从 Native 往 React 传递事件的方法：。跟着文档来，实现了一个&ObservableWebView，继承于原生的&WebView，同时把滑动事件上报给 React://&ObservableWebView.java
public&class&ObservableWebView&extends&WebView&{
&&&&@Override
&&&&protected&void&onScrollChanged(final&int&l,&final&int&t,&final&int&oldl,&final&int&oldt)
&&&&&&&&super.onScrollChanged(l,&t,&oldl,&oldt);
&&&&&&&&WritableMap&event&=&Arguments.createMap();
&&&&&&&&event.putInt(&ScrollX&,&l);
&&&&&&&&event.putInt(&ScrollY&,&t);
&&&&&&&&ReactContext&reactContext&=&(ReactContext)getContext();
&&&&&&&&reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
&&&&&&&&&&&&&&&&getId(),&&topChange&,&event);
}这里在&onScrollChanged()&回调中，就是往 React 中报&topChange&事件。事件中包含&ScrollX&和&ScrollY&两个值。这里的&topChange&被映射到了 JS 的&onChange&事件。在 React 层就能这样用了：&&MyWebView onChange={onChangeCallback}/&，这里的&onChangeCallback&是一个自定义的回调函数。WebView&滑动的时候，就会回调到这个函数中来。为了实用方便，这里还可以做一些封装，把&topChange&封装为我们关心的滑动事件&onScrollChange：class&ObservableWebView&extends&ponent&{
&&constructor()&{
&&&&super();
&&&&this._onChange&=&this._onChange.bind(this);
&&_onChange(event:&Event)&{
&&&&if&(!this.props.onScrollChange)&{
&&&&this.props.onScrollChange(event.nativeEvent.ScrollY);
&&render()&{
&&&&return&&RCTWebView&{...this.props}&onChange={this._onChange}&/&;
}详情可以参考：。这时，我们就可以在 React 组件中的&onScrollChange&事件回调中实现滑动详情页的头部图片的效果：onWebViewScroll:&function(event)&{
//&这里移动头部的&Image
render:&function()&{
&View&style={styles.container}&
&MyWebView
&&onScrollChange={this.onWebViewScroll}/&
&&ref={REF_HEADER}
&&source={{uri:&this.state.detail.image}}
&&style={styles.headerImage}&/&
},这里的写起来也很简单。关键看一下&onWebViewScroll&函数的实现。最简单的实现方法就是，通过 ScrollY 来设置组件的&state，来让 React 自动触发重绘。因为事件上报非常频繁，就会触发大量的重绘，会带来严重的性能问题。React Native 提供了&，也就是直接操作组件，这种方式不会触发重绘，效率会高很多。onWebViewScroll:&function(event)&{
&& //&像素转为&React&中的大小单元
var&scrollY&=&-event&/&PIXELRATIO;
var&nativeProps&=&precomputeStyle({transform:&[{translateY:&scrollY}]});
//&直接操作组件的属性
this.refs[REF_HEADER].setNativeProps(nativeProps);
},到这里，实现这个 React Native 版的知乎日报客户端所涉及的技术点，基本都讲完了。还有很多细节请参考源码：，欢迎一起交流，和发 pull request 来一起完善这个项目。总结这篇文章几百字就写完了，看起来实现这个客户端并不复杂。其实，这里有远超过我想象的坑，后面我应该还会写一篇文章，来总结这个项目中遇到的坑。总体来说，React Native for Android 作为初期的版本，实现一个简单 APP 已经可行。但是它并不完善，如果想用在实际项目中，还需要慎重考量。最后，大家可以关注这个项目：。希望能对开始关注 React Native 的同学有些帮助。
上一篇： 抽象很有用，而接口（interface ）是实现依赖反转的途径之一。但是我们应该正确的使用接口。 在开发中，我们得到了一个去观察用户名文字变化的需求。每当用户输入东西时，我们需要得到这个数据，做验证一类的事情。 实现这个东西第一眼看上去非常简单。因为
下一篇： 2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React / React Native 可以： H5, Android, iOS 多端代码复用 实时热部署 在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如