BeFor Web
为网而生 - 原创译文博客 - 关注移动互联网及AR/VR产品的用户体验设计

视觉设计

怎样在Xcode 6中使用矢量图形 »

周末又要过掉了,沮丧。眼看进入深冬了,天气却越发春意盎然。话说2014年就要过去了么。这一两年下来,已经不太敢期待新的一年了;谁知还会有什么样的事情发生。

我发现自己在周末两天里会花费越来越多的时间玩游戏了。常年GTA,像是逃进另一个世界。IV,V,或是iOS上的SA,沉浸在里面,一点都不想出来。玩来玩去还是SA的感觉最暖最安心;游戏当中本就是初夏时节的LA情景,加上自己在2008年从5月到10月宅着的日子里时常在玩(当时还是PC,怎样也不会想到若干年后可以在手机或平板上玩;那年我在用诺基亚的歪脖子音乐机),所以现在一旦进入SA就会立刻感受到那种夏天的味道。

说正事儿吧。今次略技术向;其实已经见过汉化,我只是想自己做一遍。之前捣鼓了点东西,要适配6和Plus,自己做做切图才发现确实有够烦。基于矢量图生成PNG图形的方法也是事后才知道,学习下,希望接下来可以实践。下面进入译文。

iOS应用的视觉形式通常是以图形元素驱动的。在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源。所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的 - 你需要为每种规格的图形元素单独切图。而随着iPhone 6及Plus的发布,我们又多了一套@3x需要处理,事情变得越来越复杂。

幸运的是,苹果在Xcode 6当中给我们带来了一些很棒的工具用以管理图形资源。更棒的是,新的工具和实现方式可以帮我们从容的应对未来的iOS设备,例如基于Storyboard为iOS 8设备生成启动图片,这样你就无需再为不同的设备类型单独制作。此外还有一个非常重要的新功能,就是在应用构建阶段基于PDF图片文件自动生成各种规格的图形资源。本文中,我们就来一起探索一下这种能帮你节省大量时间成本的方法。

打破定式,突破屏障,走出自己的创意舒适区 »

周日傍晚,天色早早的暗了下来,楼下某只狗子一直叫着;有种让人出神的宁静。

我觉得我究其一生最终所要追求的恐怕就是这种宁静。亦或是说心里早已老去了。btw,有谁听过Guns N' Roses某张知名Bootleg拼盘没?也就是所谓的不插电专辑。我在2001年冬天差不多这个时候和Allen、祥子在南开后街买到的这张,同时还有Iggy Pop的Beat'em Up等若干。呼,突然想起这里根本不会有人知道我所指的究竟是谁。

那各位会知道dianping.com,也就是我曾经工作了...说起来也是将近3个年头的地方(2010-2013)。可惜,好的时代终结掉了,fucking tw bitch。话说回来,也唯有那几年在工作中结识一帮老小伙伴们是至今仍然每天保持联系交流的。几年来,大家聊的无非是工作啊感情啊八卦啊一类,却也能感受到一种随着时间推移而产生的微妙变化。也许我能说的只有,you're not alone,对他们每一个人。

而如今在鹅厂,则是另一则故事。你知道,在这里我真真实实感受到了什么叫做优秀与一流。工作这件事上,我是幸福的,我很多时候甚至认为这些幸福根本就超出我所应得的。几乎每天都能跟不同的人学到一些东西,这是种很棒的感觉。

我甚至不知道为什么此时此刻想要聊起这些。只是想,念叨出来吧。进入正文。

工作于压力之下,感觉就像始终被批评家们的准星瞄准着,动弹不得。不幸的是,你压根没法看到这些狙击手在哪里,他们隐藏自己的技巧十分巧妙 - 实际上他们就在你自己的头脑当中。我们自己其实就是最差劲的批评家,长时间的负面状态会导致自我怀疑、创意障碍、思维局限等等。

适当的反省与自我批评是有益的,一旦过度,便会逐渐对自己所爱的创意工作产生漠视。本文中,我将与各位探讨一些关于怎样打破思维定式、将它们推向正确方向的经验。其中,我尤其想与大家分享一些方法,使我们在遇到创意障碍时能以更加无畏的态度去战胜它们。自信,将有助于你走出自己的舒适区域,打破惯例,并发现新的道路。

设计师+Xcode:突破产品开发的流程界线 »

入冬之后,喵的状况又有些让人牵挂;换季时节似乎特别容易不稳定;只是记得从前6年多没有这样的情况,而从去年开始喵的事就成了我心里最大的事。

和上周差不多,仍是看着小握的游戏解说,空调暖暖的;不同的是现在手边放着40度苏格兰保健饮品,还有一些麻辣零食;当然译文不是边喝边做,目下只是在把引言补完。我去了,这也能叫引言。

话说其实是强迫自己本周不做Apple Watch主题。一篇小文,好像随口讲了些故事而已,关于视觉设计师直接使用Xcode打造界面以提升产品开发效率的话题。必须说,要达到“iOS前端”的程度,很难不依靠一定程度的代码工作,但值得一学,值得一试。另外,读过这样的文章后,也会从另外一些角度来看待苹果从iOS 7开始推行新设计语言的一些初衷 - 让设计师和开发者都可以相对轻松一些的在开发环境中创建界面,实现设计方案。下面进入译文吧。

今年年初,我们团队与瑞典的一家叫做Billogram的创业公司进行了交流。他们希望通过更流水化的发票处理程序帮助中小型公司改善现金流状况。在初期的探讨当中,我们看到了将他们的服务移动化的巨大机遇,那将能够使客户随时随地把控他们的财务状况。

为Apple Watch进行设计的五点原则 »

风吹的蛮冷的。明天要降温将近10度吗。终于像冬天了。

之前在朋友圈念叨来着,最近对Apple Watch各种YY,幻想每天生活里哪些小任务可以经由这款设备而提升效率质量。越想越离不开,我想我应该买一块Sport深空灰配黑色表带那款吧。好想放到嘴里吃掉。

上周把Apple Watch界面设计规范全部放出,也是蛮多的。今天这篇类似于对其中一些设计要点的归纳提炼。进入译文。

在为Apple Watch进行设计时,以下五点是设计师们需要注意的:

Apple Watch界面设计规范(21) - 菜单图标 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

情境菜单中的图标都是基于模板创建的,其中的图形样式是由alpha通道的形状决定的。图片文件中的颜色信息会被忽略。

图标的背景画布比图标当中的实际内容要大。图形四周的多余空间可以确保图标边缘与形状内容之间的框架足够清晰。

对于不同规格的Apple Watch,菜单图标的画布尺寸及图标内容尺寸见下表:

Apple Watch界面设计规范(20) - 图标与图片尺寸 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

每个应用都需要漂亮而独特的应用图标,使用户容易记住,便于辨识。在系统主屏当中,用户只能通过图标来识别应用,所以你的图标一定要易于记忆,与iOS版本的图标相似,并且要表达出应用的功能。

Apple Watch界面设计规范(19) - UI元素 - 菜单 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

在Apple Watch上使用按压手势可以唤出与当前界面相关的情境菜单。那些与当前界面内容相关的功能可以默认收起到情境菜单当中,平时无需占用界面空间。

Apple Watch界面设计规范(18) - UI元素 - 日期与计时器 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

日期与计时器控件是Apple Watch上的一种特定的标签(label),用来显示与时间相关的信息。

Apple Watch界面设计规范(17) - UI元素 - 地图 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

地图可以向用户传达地理位置信息。你可以在应用中通过地图来展示终点或POI(point-of-interest)位置。你的应用所展示的地图是静态截图,不具有交互性;点击该地图会打开Apple Watch的地图应用。

Apple Watch界面设计规范(16) - UI元素 - 滑块 »

原文来自苹果官方于2014年11月发布的预备版本Apple Watch界面设计规范。相关信息及目录详见Apple Watch界面设计规范(预发布版本) - 目录。本文由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

用户可以通过滑块在一组互相分离的数值当中进行调整。点击滑块左右两侧的图标即可调整数值。

Pages