Be For Web - 导读文摘 http://www.beforweb.com/taxonomy/term/25 en 导读文摘130906 - App体验记录、更多iOS7设计规范译文 http://www.beforweb.com/node/250 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周五晚上还算精神,既没有一周工作结束后的轻松与愉悦,也没有摧枯拉朽的疲劳与无力;平常心。</p> <p>于是临时来一发导读;不过眼看着已然10点半了,今天能不能发上来还两说的;平常心。靠在沙发上,看着傻猫猫仰面朝天的睡着,偶尔抖抖爪子,然后自己抱住自己的小脑袋瓜,也许是在做梦吧;听着Foo Fighters,完全是去年这个时节的节奏,仍是秋高气爽,却物是人非。</p> <p>今次的导读包括两篇已经放在<a href="http://beforapps.com">Beforapps</a>上面的App体验记录(均为投稿作品,欢迎各位投稿或瞎聊呗,发coda7210的gmail或者到<a href="http://weibo.com/c7210">微博</a>联系我都好),以及我目前所在团队中几位交互设计师翻译的若干章节的iOS7设计规范;个人认为是HIG中最关键的几个章节,关于各类栏、控件的外观、交互规则等方面。</p> <p>哦另外说,最近试着在这边一些页面侧边增加了一个&ldquo;推广&rdquo;,链到<a href="http://shop102288713.taobao.com/?spm=2013.1.1000126.d21.wAbIGM">一笔一画</a>的iPhone5草图本;她家还有其他一些不错的本子,喜欢的朋友可以看看呗。</p> <!--break--><h3> App体验记录 - 金山词霸 vs. 有道词典</h3> <p>来自<a href="http://www.weibo.com/csjungle">晓天隐</a>的投稿。</p> <blockquote><p>最近刚更新了金山词霸,新版的改动非常大,但个人觉得改动步子跨的有点大,于是乎&hellip;而同类产品有道词典也同样有了大的改动,但相比较金山词霸而言,其改动挺值得一赞的(好像eico design参与了设计)。不管是金山词霸还是有道词典,都在界面上添加了图片来增加应用整体的美观性,并且减少字典本身给用户带来的枯燥的感觉。但两者的效果却千差万别...</p> </blockquote> <p><a href="http://beforapps.com/?p=274">阅读全文</a></p> <p><a href="http://beforapps.com/?p=274"><img alt="Screenshot_2013-07-23-09-30-18-e1375019041525.png" src="/sites/default/files/images/201309-1/Screenshot_2013-07-23-09-30-18-e1375019041525.png" /></a></p> <h3> App体验记录 - BBC Weather</h3> <p>来自<a href="http://www.weibo.com/csjungle">晓天隐</a>的投稿。</p> <blockquote><p>个人觉得最简单的交互方式就是点击和滑动。而最近淘到的这款BBC Weather则是个人觉得比较典型的一款。期间你需要的操作除了点击就是滑动。它仅仅通过点击和滑动来与用户进行交互,通过界面的设置使得交互不显得单调,反而带来一种娱乐性。简洁而不简单,这样的交互个人非常非常的喜欢...</p> </blockquote> <p><a href="http://beforapps.com/?p=255">阅读全文</a></p> <p><a href="http://beforapps.com/?p=255"><img alt="01-bbc-weather-e1373809519905.jpg" src="/sites/default/files/images/201309-1/01-bbc-weather-e1373809519905.jpg" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 栏</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2802041697">WayneXia</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括状态栏、导航栏、工具栏、标签栏等的外观、行为与设计指导原则。</p> <blockquote><p>状态栏用于展示设备当前的状态信息。你可以为整个app来设置统一的状态栏,也可以为单独页面来设置。</p> <p>状态栏是透明的。不论竖屏还是横屏,状态栏显示始终在设备屏幕的最顶部。它展示如网络连接,时间,和电池电量等人们关心的信息。</p> <p>要慎重考虑是否要隐藏状态栏。因为状态栏是透明的,通常我们并不需要隐藏它。一味地隐藏状态栏,意味着用户要知道当前时间或看看网络是否有连接就得离开当前的应用程序...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/08/ios7-hig-17/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/08/ios7-hig-17/"><img alt="status_bar_default_2x.png" src="/sites/default/files/images/201309-1/status_bar_default_2x.png" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 控件</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2045962325">Skycai</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括活动指示器、日期选择器、联系人添加按钮、详情展开按钮、信息按钮、标签等的外观、行为与设计指导原则。</p> <blockquote><p>活动指示器显示了⼀项任务或者进程正在进行中。</p> <p>当任务正在进程中,活动指示器旋转;而在任务完成时,活动指⽰示器消失。用户不与活动指示器发生互动。</p> <p>不要显示不转的活动指示器,因为用户会由此联想到这个进程停⽌了。</p> <p>使⽤用活动指示器的目的,主要是让用户确定他们的任务或进程仍在进行中,而不是提示进程什么时候结束...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-019/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-019/"><img alt="activity_indicator_2x.png" src="/sites/default/files/images/201309-1/activity_indicator_2x.png" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 临时视图</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2045962325">Skycai</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括警告、操作菜单、模态视图的外观、行为与设计指导原则。</p> <blockquote><p>警告窗口在app屏幕的中央弹出,浮在视图的最上层。警告窗口的外观与app没什么联系,是因为这强调了它的出现,取决于app或设备发生了一些变化,而不一定是用户的最新行动的结果。用户只有在取消警告窗口之后,才可以继续使用当前正在运行的app。</p> <p>警告窗口至少包含了一个按钮,让用户点击以解除警告。默认情况下,警告窗口会显示标题,可能也会显示一条消息,提供附加的信息。一个警告窗口可以包含一到二条文本输入框,其中之一可以是安全输入框。警告窗口的背景外观是系统定义的,不能更改。</p> <p>警告窗出现的次数并不多,这样可以让用户认真对待。确保让警告窗在您的app出现的数量降到最低,并确保每个警告都提供了重要的信息和有用的选择...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-20/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-20/"><img alt="alert_2x.png" src="/sites/default/files/images/201309-1/alert_2x.png" /></a></p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/133" typeof="skos:Concept" property="rdfs:label skos:prefLabel">体验记录</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li></ul> Fri, 06 Sep 2013 15:29:54 +0000 C7210 250 at http://www.beforweb.com http://www.beforweb.com/node/250#comments 导读文摘130206 - App体验记录(1) - Civo、美丽说... http://www.beforweb.com/node/169 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>眼看过年了,大家陆陆续续的放假回家了,我这首先给各位朋友们问个新年好了呗。</p> <p>都说新年要有新气象,虽然眼下还没到日子,不过多少也开始憧憬接下来的日子了。其实按我的个性来说怎样也都该首先怀了个旧的,但是回头看看2012年,值得怀念的事情不是很多;虽然对自己来说整个一年几乎都在打基础做准备,但总体来讲还是遗憾与无奈占了大部头;还好,经过这一年的波折,无论如何我接下来还是可以看到不少希望的。这就不坏,不是吗。</p> <p>假要好好放,年要好好过,Beforweb也不会耽误,今天不是周末发布的正日子,先上一期导读。之前也有提到过,2013年伊始建了个新的小博客,<a href="http://beforapps.com">Beforapps.com</a>,相比与Beforweb这里来讲没这么&ldquo;正式&rdquo;,内容篇幅都很短,主要用来从设计的角度记录自己平时试用试玩各种应用过程中的体验感受,而且偶尔也会有朋友以投稿或合作等方式参与进来发表些内容。</p> <p>今天就选出前面的5篇,在这里做下索引,有兴趣的朋友就围观交流呗;如果哪位有兴趣也想念叨点什么的话,欢迎投个稿。目前没上正经的投稿功能,可以直接通过邮箱(coda7210的gmail)或<a href="http://weibo.com/c7210">微博</a>与我联系。</p> <!--break--><h3> Civo &ndash; 初次加载与帐户设置</h3> <blockquote><p>将你与未知的伙伴匹配,借由TA的双眼,打开你的另一双眼睛。万里之遥,看到真实的生活场景,比旅行更真实,比生活更精彩,比世界更广阔。</p> </blockquote> <p>初次加载印象不错,第一张图片给我一种遥远而温暖的感觉。因为事先对这款应用的用途有大致了解,所以看到&ldquo;21875公里之外&rdquo;可以隐约猜测到含义...&nbsp;<a class="mLink" href="http://beforapps.com/?p=31">阅读全文</a></p> <p><a href="http://beforapps.com/?p=31" target="_blank"><img alt="01-civo.png" src="/sites/default/files/images/201303-2/01-civo.png" /></a></p> <h3> 手电筒(7th gear)</h3> <p>试过一些同类产品,最终保留的就是这款叫作&ldquo;手电筒&rdquo;的手电筒应用&hellip;保留的原因也很简单&mdash;&mdash;它可以在加载之后直接打开闪光灯,无需自己手动操作。这么简单的事儿,可是我尝试过的多数同类应用就是没有做到这一点,蛮奇怪的...&nbsp;<a class="mLink" href="http://beforapps.com/?p=64">阅读全文</a></p> <p><a href="http://beforapps.com/?p=64" target="_blank"><img alt="02-7-gear.png" src="/sites/default/files/images/201303-2/02-7-gear.png" /></a></p> <h3> Mono Outliner</h3> <p>有段时间为了组织记录自己一些大大小小的目标和事项,搜罗了不少Todo方面的应用,慢慢才知道专门有这样一类Outliner工具。相比于普通的Todo,这类工具更偏重于信息的层级化组织,当然其中也会包含代办事项方面的功能。在这些Outliner工具当中做以比较,最后留下这款Mono Outliner,因为界面最简洁最素净...&nbsp;<a class="mLink" href="http://beforapps.com/?p=76">阅读全文</a></p> <p><a href="http://beforapps.com/?p=76" target="_blank"><img alt="03-mono-outliner.png" src="/sites/default/files/images/201303-2/03-mono-outliner.png" /></a></p> <h3> 美丽说你这是要干嘛?!</h3> <p>(作者<a href="http://weibo.com/chibicat2012">Chibi猫</a>)美丽说改版了,但是你这是要干嘛捏?改得感觉和天猫一样了,你也想做小清新啦?好吧,你变小清新了是好看了时尚了,但是你不再懂女人心了!...&nbsp;<a class="mLink" href="http://beforapps.com/?p=60">阅读全文</a></p> <p><a href="http://beforapps.com/?p=60" target="_blank"><img alt="04-meilishuo.png" src="/sites/default/files/images/201303-2/04-meilishuo.png" /></a></p> <h3> 爱翻译爱拍拍</h3> <p>有些时候,试用App的过程会让人觉得非常焦虑。</p> <p>今天下了这么一个OCR翻译工具;印象里,试过的多数OCR应用都不是非常好用,有些是扫瞄和转换方面的功能并不能真正有效的实现,有些是体验方面太蹩脚。今天这款大体属于后者。初次加载之后首先是登录界面;没弄明白这样一款工具为什么需要注册登录,而且之后的功能也完全没有涉及到帐号管理或是个人数据存储等方面。另外&ldquo;登录&rdquo;的文案还是错的...&nbsp;<a class="mLink" href="http://beforapps.com/?p=114">阅读全文</a></p> <p><a href="http://beforapps.com/?p=114"><img alt="05-iphone-ios-app-ux-design-translation-ocr.jpg" src="/sites/default/files/images/201303-2/05-iphone-ios-app-ux-design-translation-ocr.jpg" /></a></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/133" typeof="skos:Concept" property="rdfs:label skos:prefLabel">体验记录</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li></ul> Wed, 06 Feb 2013 13:40:21 +0000 C7210 169 at http://www.beforweb.com http://www.beforweb.com/node/169#comments 导读文摘130124 - 打造你的设计案例作品集 http://www.beforweb.com/node/162 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Beforweb这个博客刚刚开始做的时候,搞过两期&ldquo;导读文摘&rdquo;的样子,推荐了一些自己最近看到的文章;后来掂量了一下,觉得意义不是很大,还不如把时间精力用在正经产出的内容方面;今次算是个例外了。</p> <p>因为个人需求,最近搜罗了一些portfolio(设计作品集)方面的资源及方法文章,放着也是放着,不如汇总索引一下,有兴趣有需求的朋友可以前去围观。至于需求是什么,大家也心知肚明呗;对于设计师来说,干巴巴的文字简历显然是不够的,看看国外同行们是怎样打造自己的作品集还有个人案例展示站点的,兴许可以找到一些思路和启发。</p> <p>另外,最近也向一些前辈们请教了这方面的实践经验,得到了不少金石良言;接下来花一两期的篇幅专门做做这方面的文章也是有可能的叭。不多说了,把目前看到的优秀资源陈列在下面:</p> <!--break--><ul> <li> <a href="http://www.onextrapixel.com/2013/01/23/60-clean-and-simple-examples-of-portfolio-design">60个简洁的作品集设计汇总</a>(来自onextrapixel.com)</li> <li> <a href="http://dribbble.com/tags/portfolio">Dribbble上的作品集设计案例</a></li> <li> <a href="http://www.webdesignersblog.net/design/85-impressive-portfolio-website-roundups-from-2012/">2012年的85个优秀作品集网站</a>(来自webdesignersblog.net)</li> <li> <a href="http://www.smashingmagazine.com/2009/08/05/30-fresh-and-inspirational-portfolios-with-a-twist/">30个作品集设计案例</a>(来自smashingmagazine.com)</li> <li> <a href="http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/">50个作品集站点,激发你的创意灵感</a>(来自smashingmagazine.com)</li> <li> <a href="http://www.awwwards.com/search-websites?text=portfolio">Awwwards上的作品集设计案例</a></li> <li> 文章(英) - <a href="http://www.usabilitycounts.com/2013/01/17/the-ux-portfolio-telling-your-story">UX作品集 - 讲你自己的故事</a></li> <li> 文章(英) - <a href="http://www.netmagazine.com/features/redesign-your-portfolio-site-10-easy-steps">通过10个步骤重新设计你的作品集网站</a></li> <li> 文章(英) - <a href="http://www.netmagazine.com/features/make-perfect-portfolio">打造完美的作品集</a>&nbsp;(<a href="http://beforweb.com/node/164">译文by C7210</a>)</li> <li> 信息图 - <a href="http://blog.printrunner.com/2013/01/free-infographic-why-showcase-your-work-on-online-portfolio-sites/">为什么要将你的设计案例展示在线上</a></li> </ul> <h3> 60个简洁的作品集设计汇总</h3> <p><a href="http://www.onextrapixel.com/2013/01/23/60-clean-and-simple-examples-of-portfolio-design" target="_blank"><img alt="01-portfolio-website-showcase-ux-ui-design.jpg" src="/sites/default/files/images/201301-3/01-portfolio-website-showcase-ux-ui-design.jpg" style="width: 580px; height: 374px;" /></a></p> <h3> Dribbble上的作品集设计案例</h3> <p><a href="http://dribbble.com/tags/portfolio" target="_blank"><img alt="02-s-dribbble-portfolio-website-showcase-ux-ui-design.png" src="/sites/default/files/images/201301-3/02-s-dribbble-portfolio-website-showcase-ux-ui-design.png" style="width: 580px; height: 353px;" /></a></p> <h3> 2012年的85个优秀作品集网站</h3> <p><a href="http://www.webdesignersblog.net/design/85-impressive-portfolio-website-roundups-from-2012/" target="_blank"><img alt="03-portfolio-website-showcase-ux-ui-design.jpg" src="/sites/default/files/images/201301-3/03-portfolio-website-showcase-ux-ui-design.jpg" style="width: 580px; height: 268px;" /></a></p> <h3> 30个作品集设计案例</h3> <p><a href="http://www.smashingmagazine.com/2009/08/05/30-fresh-and-inspirational-portfolios-with-a-twist/" target="_blank"><img alt="04-portfolio-website-showcase-ux-ui-design.jpg" src="/sites/default/files/images/201301-3/04-portfolio-website-showcase-ux-ui-design.jpg" style="width: 500px; height: 395px;" /></a></p> <h3> 50个作品集站点,激发你的创意灵感</h3> <p><a href="http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/" target="_blank"><img alt="05-portfolio-website-showcase-ux-ui-design.jpg" src="/sites/default/files/images/201301-3/05-portfolio-website-showcase-ux-ui-design.jpg" style="width: 500px; height: 350px;" /></a></p> <h3> Awwwards上的作品集设计案例</h3> <p><a href="http://www.awwwards.com/search-websites?text=portfolio" target="_blank"><img alt="06-awwwards-portfolio-website-showcase-ux-ui-design.png" src="/sites/default/files/images/201301-3/06-awwwards-portfolio-website-showcase-ux-ui-design.png" style="width: 500px; height: 239px;" /></a></p> <h3> 文章(英) -UX作品集 - 讲你自己的故事</h3> <p><a href="http://www.usabilitycounts.com/2013/01/17/the-ux-portfolio-telling-your-story">The UX Portfolio: Telling Your Story</a></p> <h3> 文章(英) -通过10个步骤重新设计你的作品集网站</h3> <p><a href="http://www.netmagazine.com/features/redesign-your-portfolio-site-10-easy-steps">Redesign your portfolio site in 10 easy steps</a></p> <p><a href="http://www.netmagazine.com/features/redesign-your-portfolio-site-10-easy-steps" target="_blank"><img alt="08-article-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.jpg" src="/sites/default/files/images/201301-3/08-article-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.jpg" style="width: 595px; height: 325px;" /></a></p> <h3> 文章(英) - 打造完美的作品集</h3> <p><a href="http://www.netmagazine.com/features/make-perfect-portfolio">Make the perfect portfolio</a></p> <p>译文:<a href="http://beforweb.com/node/164">怎样打造完美的设计作品集</a></p> <p><a href="http://www.netmagazine.com/features/make-perfect-portfolio" target="_blank"><img alt="09-article-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.jpg" src="/sites/default/files/images/201301-3/09-article-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.jpg" style="width: 595px; height: 325px;" /></a></p> <h3> 信息图 - 为什么要将你的设计案例展示在线上</h3> <p><a href="http://blog.printrunner.com/2013/01/free-infographic-why-showcase-your-work-on-online-portfolio-sites/" target="_blank"><img alt="07-thumb-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.png" src="/sites/default/files/images/201301-3/07-thumb-Why-Showcase-Your-Works-on-Online-Portfolio-Sites.png" style="width: 500px; height: 237px;" /></a></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/131" typeof="skos:Concept" property="rdfs:label skos:prefLabel">作品集</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/132" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Portfolio</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li></ul> Thu, 24 Jan 2013 06:59:36 +0000 C7210 162 at http://www.beforweb.com http://www.beforweb.com/node/162#comments 导读文摘111011(Google Dart,iPhone应用设计,轻邮件...) http://www.beforweb.com/node/11 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>导读时间。总觉得导读文摘这个词儿用的有些别扭,不过语义上来说又没什么不妥。不琢磨了。</p> <p>从今天读到的文章里挑出那么6篇放上来,都是最近比较关注的一些方面:</p> <ul> <li> 谷歌推出新的Web编程语言Dart</li> <li> 不拘规范的iPhone优秀应用设计细节</li> <li> Web产品到移动产品的设计变化</li> <li> Shark(鲨鱼):3G时代的轻邮件</li> <li> 给移动互联网创业公司的六条建议</li> <li> 学习腾讯的产品管理之道</li> </ul> <!--break--><h3> Google推出Web编程语言Dart,帮助开发者客服JavaScript的缺点</h3> <p>Google今天蛮抢眼。不说Android市场被墙的事儿,来看看他们新发布的Dart语言。</p> <p>&ldquo;经过几个月的测试之后,谷歌终于推出了制作web应用程序的新的编程语言Dart。谷歌开发这个新的平台时主要考虑了简单性、效率和伸缩性,把强大的新的语言功能与熟悉的语言构造结合成容易定义的代码。</p> <p>谷歌表示,新的语言将帮助开发人员创建一个结构化的和灵活的Web编程语言,使Dart语言成为程序员熟悉和自然的语言并且很容易学习,保证Dart编程语言在所有现代的浏览器和环境中提供高性能。&rdquo;</p> <p>详情可参考<a href="http://sd.csdn.net/a/20111011/305516.html">赛迪网</a>或<a href="http://www.techfrom.com/17026.html">TechFrom</a>上的相关报道。</p> <p><img alt="google-dart-logo" src="/sites/default/files/images/201110/google-dart-logo.png" style="width: 290px; height: 138px; " /></p> <h3> 不拘规范的iPhone优秀应用设计细节</h3> <p>&ldquo;作为一个刚入行的交互苦逼女,最烦恼的事情是如何解决&ldquo;iPhone原生的界面控件无法满足产品日益增长的功能需要&rdquo;这个大矛盾。一方面,如果保守地采用传统的iPhone控件,不能给产品带来太多的创新价值;另一方面,如果过于突破,又害怕不能通过App Store的审核,开发同学辛苦之后却竹篮打水一场空。纠结通过的时候,看到App Store上有一些创新的设计,并从中获得启发的时候就特别开心。这里分享一些特别有新意的App,看看它们是怎么突破传统的,为自己以后的工作做点积累,为以后各个功能模块的设计提供点灵感和解决方案...&rdquo;&nbsp;<a class="mLink" href="http://www.alibuybuy.com/posts/65932.html">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/iphone-app-design-detail.jpg" rel="lightbox"><img alt="iphone-app-design-detail" src="/sites/default/files/images/201110/iphone-app-design-detail.jpg" style="width: 500px; height: 365px; " /></a></p> <h3> Web产品到移动产品的设计变化</h3> <p>&ldquo;移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了。所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务...&rdquo; <a class="mLink" href="http://www.ikent.me/blog/3957">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/web-mobile-app-design-difference.png" rel="lightbox"><img alt="" src="/sites/default/files/images/201110/web-mobile-app-design-difference.png" style="width: 500px; height: 449px; " /></a></p> <h3> Shark(鲨鱼):3G时代的轻邮件</h3> <p>&ldquo;米聊、微信兴起后,基于通讯录的应用也开始流行。虽然扫描用户通讯录会涉及隐私等敏感问题,但是这类应用凭借强大的功能,还是吸引了大批用户使用。鲨鱼也是一款基于通讯录的通讯工具,其主要特色在于让用户无需用蓝牙或添加附件等形式,而是像收发短信一样轻松收发各类文档、图片、游戏和应用,用户甚至还可以将自己所处的地理位置、导航线路等发送给对方...&rdquo; <a class="mLink" href="http://www.leiphone.com/shark.html">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/iphone-android-app-shark-micro-email.png" rel="lightbox"><img alt="iphone-android-app-shark-micro-email" src="/sites/default/files/images/201110/iphone-android-app-shark-micro-email.png" style="width: 500px; height: 445px; " /></a></p> <h3> 给移动互联网创业公司的六条建议</h3> <p>&ldquo;在Mobilize 2011大会上有很多移动互联网公司的高层,他们不仅讨论自己的产品还分享了在开发应用和服务所学到的东西。GigaOM挑选出了他们对初创移动互联网公司的六条好建议,分别来自Pandora、Flipboard、Instagram、Hipmunk、Formspring、Grey Area等知名公司...&rdquo; <a class="mLink" href="http://www.alibuybuy.com/posts/65959.html">阅读全文</a></p> <h3> 学习腾讯的产品管理之道</h3> <p>&ldquo;最近看了一些讲腾讯产品管理体系的文章,虚实都有,恰好有个同事以前在腾讯工作,能提供第一手的资料。于是今天下午开了1小时会议,专门讨论腾讯的管理之道,发现有这么几点处理得很好。马化腾带着一大批产品高管自上而下,持之以恒地推动产品本位的管理体制规范化,并不断地创新和优化这套体制,使得整个公司上上下下融入了&rdquo;产品的基因&rdquo;,最终成就了&lsquo;产品的腾讯&rsquo;...&rdquo; <a class="mLink" href="http://ucdchina.com/snap/4891">阅读全文</a></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li><li class=" taxonomy-term-reference-2"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/20" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/39" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Dart</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/40" typeof="skos:Concept" property="rdfs:label skos:prefLabel">创业</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/41" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品管理</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li></ul> Tue, 11 Oct 2011 09:47:55 +0000 C7210 11 at http://www.beforweb.com http://www.beforweb.com/node/11#comments 导读文摘111006(Google+,Our Mobile Planet,Delicious...) http://www.beforweb.com/node/8 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>趁假期还没结束,做一篇文章收集。或者叫作文摘、导读、文摘导读,whatever了。</p> <p>话题范围将涉及互联网产品、设计、开发等方面,不限制,不纠结,符合这个小博客的大方向即可。主要目的仍是收藏和学习,搞的像Top X榜单一样有模有样的放在这里,终归比扔进delicious连自己都会忘记的某个角落里面要好些。希望也能够为走过路过的朋友们提供些阅读参考。</p> <p>先不多琢磨形式方面的问题,随做随磨合好了。今次导读内容列表如下:</p> <ul> <li> 移动市场数据分析利器降临,Google发布新工具Our Mobile Planet</li> <li> Google管理层不用Google+,你呢?</li> <li> del.icio.us已死</li> <li> 粉刷精灵(ColorSmart):省事省钱的粉刷应用</li> <li> 从朋友的网站看互联网产品的定义</li> <li> 互联网产品经理发展的5个阶段</li> </ul> <!--break--><h3> 移动市场数据分析利器降临,Google发布新工具Our Mobile Planet</h3> <p>&ldquo;互联网从业者都有这样的体会,需要大量的数据来分析问题。对于爆发式增长的移动互联网市场,这一点显得尤为突出。销售部门需要了解设备市场占有率的数据,开发者们则需要通过数据分析用户的使用习惯,管理层更是在众多数据上制定未来的发展战略。有需求就有市场,Google移动广告团队近日发布了免费的移动市场的数据分析工具Our Mobile Planet,以图表的形式向使用者展现全球移动市场的全貌...&rdquo;&nbsp;<a class="mLink" href="http://www.36kr.com/p/51208.html" rel="nofollow">阅读更多</a></p> <p><a href="/sites/default/files/images/201110/google-our-mobile-planet.png" rel="lightbox"><img alt="google-our-mobile-planet" src="/sites/default/files/images/201110/google-our-mobile-planet.png" style="width: 500px; height: 230px; " /></a></p> <h3> Google管理层不用Google+,你呢?</h3> <p>&ldquo;Google CEO Larry Page上次登录Google+是在3个多月以前,只发表过7个公开帖子,自从8月中旬以来只发过一条。即便是这样,他也比执行总裁Eric Schmidt发的帖子多7条。自从Google+发布以后,Eric Schmidt只在Twitter上转发过一条别人的评论,都没有加入Google+,并且他还一直用黑莓手机...&rdquo;&nbsp;<a class="mLink" href="http://www.36kr.com/p/51034.html">阅读更多</a></p> <p><a href="/sites/default/files/images/201110/google-management-google-plus-posts.png" rel="lightbox"><img alt="google-management-google-plus-posts" src="/sites/default/files/images/201110/google-management-google-plus-posts.png" style="width: 500px; height: 466px; " /></a></p> <h3> del.icio.us已死</h3> <p>&ldquo;Jon Udell说,del.icio.us是一个真正让人懂得网络的web2.0工具。我非常赞同这句话。还记得去年年底坊间传出雅虎要关闭del.icio.us的时候,像我这样的一些铁杆的del.icio.us粉丝是多么伤心。后来又传出好消息,YouTube的创办人从雅虎手上收购了del.icio.us。但前天推出的新版del.icio.us则让我大为失望。为啥呢?听我慢慢说吧...&rdquo; <a class="mLink" href="http://tonyyet.com/archives/733">阅读更多</a></p> <p><a href="/sites/default/files/images/201110/delicious-old-version.png" rel="lightbox"><img alt="" src="/sites/default/files/images/201110/delicious-old-version.png" style="width: 500px; height: 577px; " /></a></p> <h3> 粉刷精灵(ColorSmart):省事省钱的粉刷应用</h3> <p>&ldquo;古语有云:家事国事天下事,而在如今的国人看来,房事才是排第一位的。买房之后,装修是件很重要但也很头疼的事情,光是色调的选择和粉刷就很考究,尤其是亲自参与室内设计的房主,无论设计得多么好,但也只是&#39;效果图&#39;,是&#39;纸上得来终觉浅&#39;,与装修完的实际效果不尽相同。为此,美国一家名为Behr的建材供应商推出了一款名为粉刷精灵(ColorSmart)的家装应用,屋主只需用ColorSmart拍下房间照片,就可以在其中进行虚拟粉刷、预览效果,并可分享到Facebook、Twitter等SNS供朋友评价和建议...&rdquo; <a class="mLink" href="http://www.leiphone.com/behr-colorsmart.html">阅读更多</a></p> <p><img alt="" src="/sites/default/files/images/201110/iphone-app-colorsmart(1).jpg" style="width: 500px; height: 359px; " /></p> <h3> 从朋友的网站看互联网产品的定义</h3> <p>&ldquo;大约在去年年底的时候,一位好友的表弟因为正在做一个网站,遇到了一些技术难题,来向我咨询。一个非 IT 专业的在校大学生,已经开始跟几个程序员一起开始在互联网创业,这已经足够让既不是技术牛人,又没有任何互联网经验的我汗颜,咨询更无从谈起...&rdquo; <a class="mLink" href="http://niye.name/archives/1151">阅读更多</a></p> <h3> 互联网产品经理发展的5个阶段</h3> <p>&ldquo;每次看到各种&lsquo;产品经理的能力模型&rsquo;,我都觉得有点扯淡,总觉得模型里少了点什么,没错,就是&lsquo;适用范围&rsquo;,那一张张漂亮的图,必定只适合某些人,那么,到底是哪些人?于是,我的思路就是忘记一切模型,先去看各种顶着&lsquo;产品经理&rsquo;职位的人,他们做的事情为什么不同?...&rdquo; <a class="mLink" href="http://www.techwom.com/archives/2192">阅读更多</a></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/20" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/21" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Delicious</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/22" typeof="skos:Concept" property="rdfs:label skos:prefLabel">数据分析</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/23" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google+</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/26" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品经理</a></li></ul> Thu, 06 Oct 2011 15:33:18 +0000 C7210 8 at http://www.beforweb.com http://www.beforweb.com/node/8#comments