韩晶晶

【转】我的防身暗器-网页设计应急小技巧

UI设计师:



四十大盗 / 视觉设计 / 2011.09.29 10:19



工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……
突然觉得束手无策,脑袋里一片空白,没想法了,怎么办?
下面简浅的归纳了几个快速让页面出彩的小技巧:

1.旋转法
 – 将页面的主体或局部进行旋转



我们一般的页面版式都是方方正正,四平八稳,有点呆板。如果将局部或整体适当的旋转,打破稳定的构图,画面就会动感有趣一些。
对于上图,这种基调轻松活泼又恰好内容比较少的页面来说,主体整个旋转后,画面马上轻松活泼起来,看过现在这个画面,真是无法想象未旋转前的平淡。同时,相比大块的方形空白,不规则的余白也不会显得空洞。



上图,将背景旋转后,大面积的斜面产生了很强的速度感,赛车急速飞驰着,好像下一秒就要从电脑中冲出来一样,倾斜的大标题和旋转后的背景交叉配合,使画面整个都运动起来。这种方法可以应用到很多运动的主题上。



2.黄金分割法
 – 灵活运用黄金比例分割的办法将页面“切”开



黄金比率被认为是最理想的矩形比例,在过去的文化遗产中也有很多这样的遗存。将这个比率应用到版式设计中,也能够设计出容易为用户所喜欢的构图。但不要被这些比例所束缚,很多是靠自己的感觉去应用。
上图,除去背景无非就是一个排版清晰的页面,将背景分割后,对比的色块使画面产生纵深感,页面的丰富性和视觉冲击力迅速增强。人物也好像着陆了一样,平稳的站在画面中。



上图,用反差强烈的色块进行分割,强调了版块的划分,即使有很多地方需要强调,也能让用户迅速清楚各版块的重点,不用像以往一样1、2、3…… 将内容依次竖排下来,鼠标都已经拖到第三屏了还没完没了,又没什么新鲜感。



3.曲线法
 – 将曲线用于背景或版块分割,消除矩形分割的生硬感。



与直线相比,曲线具有圆润的特点,让人感觉轻松、愉悦。增强视觉感的同时也能够营造活跃的气氛。
上图中,大众的logo和焦点图中的机器人产品,全部由曲线组成,这种情况下,用曲线来分割背景和焦点就显得理所当然了,画面中曲线合理的运用也提高了层次感,机器人和红色标题都更突出。



仿照球的运动轨迹,贯穿着整个页面的曲线,将用户直观的带入了正在激烈进行的棒球比赛现场。看似随意,其实用曲线精当的将标题、焦点图和新闻等版块按重点进行了不同比例的分割。



4.借用法
 – 借用现实中的东西,将实物抽象化,提炼出大形轮廓用于背景



现实中的东西也可以应用到网页设计中?当然可以,只要想的到。
如图,信封是我们生活中常用的东西,如此生活化的东西借用到网页上,展开在用户面前,好像邮寄给您的信一样,立马让人眼前一亮,亲切感油然而生。作为游戏活动的通告页,用白色的信纸来盛放主体内容也再合适不过。



上图,将赛车在赛道上疾驰的场面置放到页面上作为背景,虚化的大城市,放大的赛道,飞奔的赛车……就像此刻坐在电脑前玩赛车,左手正紧紧按着W、A、S、D键一样。让用户身临其境,完全抓住了对方眼球。
以此类推,生活中很多东西都可以借用,例如:写满粉笔字的黑板、电脑的屏幕、写日记的本子、老古董的地图,空旷的足球场……



5.三角拼贴法
 – 像做手工一样,将裁剪好的三角形打乱,重新拼贴



不同的几何形状有不同的性格,圆形是活泼可爱的,方形是平稳整齐的,三角形就是尖锐动感的。
三角形的不平衡性及其尖锐性能够增强视觉上的刺激,快速吸引用户,可以用于科技和时尚这种风格同样比较“锋利”的网页。
上图,将同色系小三角形均匀的拼贴起来,马上就营造出一种钻石璀璨般的时尚感。但实践的时候要注意加减法,不能乱堆一通,点到为止即可。



上图,用艳丽的三角形对页面进行划分、拼贴。大小的组合,色块的对比,能够带给用户强烈的视觉冲击力。在搭配的时候,注意主次,以一个大的形状为主,给内容摆放留下足够空间,与其他辅助的小形状相区别。



6.色块分割法
 – 将各版块用不同颜色来区别



经常面对需求方这里是重点、那也是重点、那那那也挺重要,统统需要突出的要求,对于主题比较明快的页面 可以考虑将版块用不同颜色来区别,通过色块来强化页面版式和布局,难度较大的是在色彩搭配上要取得平衡。
上图,版式在页面都以块来体现,没有什么效果,为了突出重点,在重要区域选择了饱和度较高的红黄绿三个颜色,产生明确的视觉中心,让用户能够按照我们希望的那样阅读下去。但对比色调容易造成不和谐,红黄绿之间加上灰底的中性色来调和一下就显得不会突兀了。



当使用四到五种纯色进行搭配的时候,注意只要色相、纯度、明度三个属性中有一个属性是基本相同或者接近,搭配起来基本上都不会觉得太牵强。


—————————————————————-
以上几个小技巧可以在情况紧急时参考,大家也可以用类似的方法总结出更多的小技巧自用。



【转】大众点评网奥运会的动态海报,不错哦

UI设计师:

本届奥运会,游泳队专业卖萌,乒乓球队专业组CP,跳水队专业虐狗,而我们围观起来也是专业的,毕竟 #生活就是一场运动会#












【转】滴滴的H5分享

UI设计师:

每次心情很down出去逛逛


贴ppt贴到凌晨四点


半夜肚饿想念簋街小龙虾


分手之后又迷茫又无助的时候


滴滴总是能够准时在我们的身旁


但几乎没什么人想过这样一件事


当人们在“滴滴一下 马上出发”的时候,滴滴在做什么?


虽然所有人都习惯日常吐槽程序猿爸爸


“呆呆嗒”


“不懂聊天嗒”


但在滴滴背后的他们


正在用一种神秘力量


改变着我们的日常出行生活


为了配合滴滴研究院算法大赛的进行,


滴滴x好卖推出了一套“脑洞到家”的超酷海报,


向人们传递了每天日常生活背后“滴滴研究院的故事”。


另外,海报中还有一些炒鸡有趣的小细节


不知道各位宝宝们能不能找得到呢




喝最烈的酒 回最温暖的家



据滴滴研究院预测


在上海新天地


每晚会出现约126位青年因喝太高又不想睡马路而选择叫代驾




团圆是月饼最好吃的馅儿



据滴滴研究院预测


中秋节期间


武昌火车站会出现至少9278颗长年外工作归乡之后急于见到家人的心




星期一拒绝水逆



据滴滴研究院预测


在深圳南山区每个假期后的首个工作日


会有约570位白领因睡过头错过公交地铁而导致上班迟到




早到是恋爱里的传统美德



据滴滴研究院预测


在广州沿江路附近,


七夕情人节的晚8点到10点钟之间


会有约261人因为约会对象迟到而导致心情“唔靓”




顺路是最好的套路



据滴滴研究院预测


每个周末的晚间


都会在后海附近出现约786位孤单的乘客需要安抚




解救上地加班狗重灾区



据滴滴研究院预测


工作日每晚23点到4点钟之间


上地附近会出现至少359位程序猿下班打车回家




姗姗再也不会迟到了



据滴滴研究院预测


周六的解放碑附近


闺蜜间约好的shopping


至少有2331人因为化妆太久而推迟30-60分钟




想吃就吃是吃货的浪漫



据滴滴研究院预测


夏日每天24点到2点钟之间


超过443位放弃减肥的人出现在簋街路段给小龙虾减肥




伤心的人别坐慢车



据滴滴研究院预测


在10000位被分手的人中会有9999人


希望被甩时能瞬间离开事发地点找个安静的地方哭泣


剩下1人则选择让对方“消失”




看完海报


有宝宝忍不住捏着的大腿表示


“滴滴大法好”


“真的炸裂”


“程序猿好棒哦好像嫁给他们”


那么


对大家来说


一般滴滴打车会出现在什么样的时刻?



UI设计师:

酝酿这篇文章好久啦。本来想把这篇文章写详细点的,可是怎么也提不起兴致啊。 

  国内阿里巴巴、腾讯、网易和搜狐等知名互联网企业越来越注重用户体验,它们除了纷纷成立UED之类的部门,还专门开通了博客,与大家分享UED方面的专业知识和经验。 

  所以,我就把所有这些UED博客全找出来啦,大家没事多去这些博客逛逛吧,不仅能学到技术,还能在它们上面看到很多不错的职位招聘信息。 

  各大公司UED博客列表(以下排名分先后,我是按照我个人喜好来排的,个人感觉还是腾讯的几个博客设计得最漂亮啦): 

  1. 腾讯WSD用户体验设计团队{http://wsd.tencent.com/} 

  2. Tencent CDC Blog {http://cdc.tencent.com/} 

  3. 搜狐UED {http://ued.sohu.com/} 

  4. 19楼UED Team {http://blog.19ued.com/} 

  5. Tecent ISD Webteam {http://isd.tencent.com/} 

  6. 第九城市-UED {http://www.the9ued.com/} 

  7. 百度泛用户体验 {http://www.baiduux.com/} 

  8. 网易用户体验设计中心 {http://uedc.163.com/} 

  9. 5173用户体验团队 {http://ued.5173.com/} 

  10. 阿里巴巴(中文站)用户体验设计部博客 {http://www.aliued.cn/} 

  11. AliUE.com {http://www.alisoftued.com/} 

  12. Taobao.com UED Team {http://ued.taobao.com/blog/} 

  13. Koubei UED {http://ued.koubei.com/} 

  14. Alipay UED {http://ued.alipay.com/} 

  15. Alibaba.com UED {http://www.aliued.com/} 

  16. 支付宝官方 Blog – 支付志 {http://blog.alipay.com/} 

  17. 携程UED菁华 {http://ued.ctrip.com/blog/} 

  18. UED.Alimama.com {http://ued.alimama.com/} 

  19. 盛大UED {http://www.sndaued.com/blog/} 

  20. 人人网FED Team {http://fed.renren.com/} 

  21. 网易杭州研究院UCD博客 {http://ucd.blog.163.com/

UI设计师:


  • http://www.baiduux.com/  百度UFO
    http://ued.sohu.com/  搜狐UED
    http://ued.taobao.com/  淘宝UED
    http://www.ued163.com/  网易UED
    http://www.uedblog.com/ YAHOO!CN UED
    http://ued.ctrip.com/ 携程UED
    http://fed.renren.com/  人人网FED
    http://cdc.tencent.com/  腾讯CDC
    http://isd.tencent.com/  腾讯ISD
    http://www.sndaued.com/  盛大UED
    http://ued.koubei.com/  雅虎口碑网UED
    http://ued.alipay.com/  支付宝UED
    http://www.aliued.cn/ 阿里巴巴(中文站)UED
    http://www.aliued.com/ 阿里巴巴(国际站)UED
    http://www.alisoftued.com/ 阿里软件UED
    http://www.the9ued.com/  The9 UED

    腾讯系
    http://cdc.tencent.com/
    http://isd.tencent.com/
    http://wsd.tencent.com/
    http://flashteam.tencent.com/
    http://tgideas.qq.com/

    阿里系
    http://ued.taobao.com/
    http://ued.alipay.com/
    http://www.aliued.com/
    http://www.aliued.cn/
    http://ued.alimama.com/
    http://ued.koubei.com/

     

    百度系
    http://www.baiduux.com/
    http://mux.baidu.com/

     

    网易系
    http://uedc.163.com/
    http://www.ued163.com/
    http://ucd.blog.163.com/

     

    其他
    http://ued.sina.com/
    http://www.sndaued.com/
    http://ued.sohu.com/
    http://ued.iciba.com/
    http://ued.ctrip.com/
    http://www.kdued.com/
    http://ued.5173.com/
    http://blog.19ued.com/

     

    还有一些不错的用户体验团队没有公开的网站,比如:创新工场、Google、Microsoft、Nokia、Motorola等。

     

    前端团队
    阿里巴巴 UED — 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着。
    阿里巴巴中国站UED — 阿里巴巴中国站UED成立于1999年,全称是用户体验设计部(User Experience Design Department),是阿里巴巴集团最资深的部门之一。
    支付宝前端开发 — 支付宝前端开发车间。
    淘宝UED — 淘宝网用户体验团队。
    淘宝MED — MED(Marketing Experience Design). 是淘宝营销体验设计部门,为淘宝网的营销产品做体验设计。
    口碑UED — UED(User Experience Design) 中文意思就是用户体验设计。
    百度MUX — MUX(Mobile User Experience) 百度无线用户体验部。
    百度泛用户体验 — 泛用户体验平台,是以’用户体验’为核心的跨专业分享平台。
    盛大游戏UED — 专注用户体验,改变生活,让互动娱乐更精彩。
    携程旅游UED — 这是一个血液中流淌着创意和活力的团队,在越来越关注严谨和灵活的过程中成长起来,我们对前端的需求如此强烈
    腾讯CDC — 全称是Customer Research & User Experience Design Center(即用户研究与体验设计中心)作为腾讯的核心部门之一.
    腾讯ISD — ISD Webteam是一个设计团队,即腾讯互联网业务系统网站组。
    腾讯ISUX — 腾讯 ISUX 全称腾讯互联网用户体验设计部 (Internet Service User Experience),于2011年3月8日正式成立,前身为 ISD Webteam 网站组。
    腾讯WSD — 腾讯用户体验设计团队. 设计无线,快乐无限。
    腾讯Flash Team — 这里有一群可爱的Flash娃,他们热爱ActionScript开发~
    腾讯soso团队博客 — soso更懂你。
    财付通TID — Tenpay Innovation Design, 财付通设计中心。
    5173 UED — 5173用户体验设计团队(User Experience Design),简称UED,成立于2009年。
    19楼UED — 19楼 UED团队。
    人人FED — 我们来自人人网,FED是”Front End Develop and Design”的缩写。
    网易邮箱UI团队 — 网易邮箱UI团队。
    网易UED — 我们的团队博客,关注用户体验设计、关注web前端开发。
    网易UEDC — 网易用户体验设计中心(User Experience Design Center),简称”设计中心(UEDC)”,成立于2008年底。
    搜狐UED — Sohu UED Team就聚集着这样一群人,执着于为用户提供更好的产品和体验,哪怕是对一点点小细节的精益求精。
    新浪UED — 一个关注用户体验、关注工作流、关注作品质量的有爱团队。
    爱词霸UED — 爱词霸用户体验团队博客,有关用户体验设计和研究的经验分享。

     

    其它团队
    淘宝搜索 — 淘宝搜索技术blog
    Alibaba DBA Team — 这里记录着阿里巴巴数据库团队成员的点点滴滴
    淘宝Data — 淘宝数据平台与产品部,是淘宝核心的数据平台技术和数据产品研发团队
    淘宝DBA Team — 淘宝数据库技术团队
    淘宝JAVA中间件团队 — 我们是淘宝JAVA中间件团队。我们为淘宝网构建JAVA底层架构和基础服务。
    Taobao QA Team — 做测试的行业标准
    淘宝核心系统团队 — 淘宝核心系统团队隶属于淘宝产品技术部,负责淘宝应用基础平台的研发和搭建
    阿里巴巴Data Warehouse — 阿里巴巴数据仓库部门主要收集公司内外部所有数据
    腾讯TGideas — TGideas是腾讯游戏的专业设计团队
    腾讯GDC — GDC的前身叫GDT(QQGAME DESIGN TEAM),QQ游戏产品设计中心

     

    个人博客
    Kejun — 就职于豆瓣
    Donkey(倔倔) — 就职于豆瓣
    蒙晨(波希米亚) — 就职于豆瓣
    greengnn(老卡) — 就职于豆瓣
    糖伴西红柿 — 就职于豆瓣
    Fenng — 曾就职于支付宝
    sofish — 就职于支付宝
    白鸦 — 就职于支付宝
    62mm — 就职于支付宝
    伯约(老鱼) — 就职于支付宝
    怿飞(圆心,Blank) — 就职于淘宝
    玉伯(lifesinger) — 就职于淘宝
    明城(mingcheng) — 就职于淘宝
    Der(崇志) — 就职于淘宝
    黑妞HAHA — 就职于淘宝
    秦歌(Kaven) — 就职于口碑网
    Emu(Stone) — 就职于腾讯
    Ghost — 就职于腾讯
    Yuguo — 就职于腾讯
    臭鱼 — 曾就职于腾讯
    艾文王 — 就职于腾讯
    Danger — 就职于腾讯
    神飞 — 就职于腾讯
    pufen(飘飘) — 就职于腾讯
    屈超 — 就职于腾讯
    米随随 — 就职于腾讯
    大猫 — 就职于腾讯
    AVENIR(郑焕义) — 就职于腾讯
    李振文 — 就职于腾讯
    OnLing — 就职于腾讯
    Xiaoxiao — 就职于腾讯
    Seven — 就职于腾讯
    Lerroy — 就职于腾讯
    愚人码头 — 就职于搜道网
    子鼠,秀才 — 就职于百姓网
    Adam Lu — 就职于新浪
    林小志 — 就职于携程旅游
    小灰灰 — 就职于携程旅游
    小JOE — 就职于腾讯
    彬Go — 就职于人人
    Rokey — 曾就职于微软,网易,金山软件
    Evance(布拉格) — 就职于阿里巴巴日本
    深空 — 就职于腾讯
    代码人(tomie) — 就职于腾讯
    小爝(龙啸) — 就职于淘宝
    Aether — 就职于土豆网
    一葉千鳥 — 曾就职于盛大
    7月 — 就职于Adobe
    周裕波 — 就职于盛大创新院
    崔凯 — 就职于傲游
    勾三股四 — 就职于傲游
    welefen — 就职于百度
    kent.zhu — 就职于百度
    aoao(嗷嗷) — 就职于百度
    JerryQu — 就职于百度
    胡晓 — 就职于网易
    5key — 就职于阿里巴巴
    Adam — 就职于Yahoo
    slj(申力军) — 就职于赶集

    文章来自:http://www.cnblogs.com/hnrainll/archive/2012/10/22/2733297.html

      



【转】日本设计师常用素材网站

UI设计师:

你好,我是モモコ(MOMOKO)。


    这次是介绍Web app设计时候,可以参考的UI设计和设计趋势的设计图库链接的合集。


 


Sps collection



    http://spscollection.com/


    简洁的构成Web app设计的链接合集。


    关键字搜索,范围分类和区分颜色去分类,最大显示各100个。


 


AGT



    http://agtsmartphonedesign.com/


    国内外都有的Web app设计的设计图库。


    有鼠标经过时截屏纵向变长的显示特点。


 


iPhoneDesignBox



    http://design.web-hon.com/


    主要是国内的Web app的汇总。


    PC和SP两方面的首页的截屏。能直观的比较。很难得。


 


Thinkthing



    http://thinkthing.net/


    以用户登陆后投稿的形式的手机网页设计的汇总网站。


    登录的状态下,不论国内外,有各种各样的网站。


 


Pttrns



    http://www.pttrns.com/


    在手机app上用的优秀的UI和设计合集的网站。


    因为是海外的网站所以需要英语,浏览的时候有多种的分类更容易查找。


 


InspiredUI



http://inspired-ui.com/


对应iPhone,iPad,Android三个机种的app设计的汇总网站。


每个一个机种有大量的截屏,更容易参考。


 


AWESOMENESS



    http://www.mobileawesomeness.com/


    海外Web app设计的设计图库。


    对网站按比分划分,虽然意识到为什么得高分,但是看到也不一定是好的。


 


iconDrop



    http://icondrop.net/


    在Webapp制作时候必需的Webcilp图标,app图标的汇总网站。


    能看到同一个系统的详细页,很方便查找。


 


总结


    怎么样?


    不止是国内,海外的趋势也非常有参考价值。


    提取大量的设计和UI,使网站更容易贴近用户。


 


那么,再见!


 


 


出典:http://liginc.co.jp/web/design/144514


翻译:SISENdesign


 



Principle : 你必须试一试的原型设计工具

UI设计师:

Shunz@UX:



From: "Principle : the prototyping tool you've got to try"(https://blog.growth.supply/principle-the-prototyping-tool-you-got-to-try-93ab743fe4ae)




距 Daniel Hooper 推荐他的新软件给我已经有五个月了。他给了我一个非常棒的机会:成为 Principle 初期版本的Beta测试用户。




长久以来,我花了很多时间在寻找一个好的动画和交互设计方式。


过去常用的是After Effect


  AE非常耗费时间交互不友好并且效果不够真实。我常常花很多时间来折腾缓动曲线,以正确获得完美、平滑的动画效果。然而,程序猿们却从来没有能够按设计效果100%实现过。




尝试了 Pixate 和 Atomic.io


  但是从未真正的掌握他们,因为他们的软件界面用起来很不熟悉。需要花时间(可我缺的就是时间)去多练习、去搞懂他们是怎么工作的。所以我放弃了他们并且浪费了30天的试验时间......




从没搞明白过 Framer.js


  我不是一个写代码的。在我看来,如果你不得不靠写代码来创建一个原型,你不妨去学习真正的语言并且花一些时间去和开发人员在一起。(这里我有些夸张,我知道Framer确实很强大,但仍然......)




Origami 要学的东西太多


  很多设计师都发现它很棒,我认可,它看起来非常有效和强大,还有一个巨大的社区在分享他们的经验。但是要记住各种Patch的功能这种方式对我来说太不熟悉了。所以我还是搞不定。




Proto.io 因为没有预览窗口而导致放弃


  这是一个非常强大的工具,也有一些很有趣的特点。但当你每次都必须先保存并重新加载原型才能看到它的运行效果的时候,简直太扫兴了。   




是因为懒于尝试和学习新的软件吗?   


  我很喜欢可视化和快速的工作环境。基本上说,在不同的软件之间跳转切换实在是工作效率的杀手。尤其是当这些软件之间不共享相同的概念、名称、用户界面以及快捷键的时候。(没错,Adobe,就是在说你,在AE里按“T”键为什么不是对应的文本工具呢?)


  因此,我不想每5分钟就不得不转换一次思维模式。(译注:对此译者也是深有同感,如果能在一个软件中一站式解决所有设计需求,效率上肯定会高很多)




【 心中的圣杯: Principle 】


  这个软件很聪明的结合了Sketch、Keynote、Flash以及After Effect等软件的优点(再加上一些专门做交互原型的额外功能)。


  最让我印象深刻的是第一次使用时,就立即感觉很熟悉。如果你也很熟悉Sketch,可以发现Principle里面有:



  • 检查器面板(Inspector)


  • 图层列表(Layer list)


  • 画板(ARTBOARDS) (!)





【 案例示范 】


第一步 :创建(导入)你的素材




第二步: 选择一个素材及其交互设置项



上图中,选中了蓝色矩形,并且选择了“点击”交互设置




第三步 : 这个交互设置复制了一份画板,你可以调整其中任意素材。



第四步:软件自动创建了其中的渐变动画,然后就可以开始通过预览窗口试玩这个动效了。



创建一个复杂的渐变效果,竟然如此不可思议的快速和简单。




在原型设计的工作流中加入画板有什么好处?


  我曾经在阅读时学到一个理念:像一个编舞者一样设计界面上的动效。画布就是舞台,而各种素材就是其间的舞者。


  当从一个场景渐变过渡到另一个场景时,用户界面上的每个元素的动效都需要有意义。


  使用画板这里真的是最好的,因为你可以看到每个应用程序的状态,每个屏幕一眼,UI将如何反应。


  引入画板的好处包括:可以看到App的每一个状态,每一个场景以及UI元素是如何反馈的。




【主要功能特性】


轻松地创建从一个场景到另一个场景的渐变效果,对我来说,这就是我要的核心功能。


除此以外,Principle还有很多强大的功能可以帮助把原型设计更上一层楼。




 交互动作设置(Interaction)


此软件专注于设计触摸屏应用程序。因此可以设置以下各种交互动作:




  • 点击(Tap)


  • 拖拽(Drag)


  • 滚屏(Scroll)


  • 自动创建渐变动效(Auto animation)


  • 长按(Long press)





动效设置面板(Animation Panel)


 “每个动画效果的共性是什么?  他们强烈建议永远不要创建线性的动画效果,因为不符合现实世界的心理预期。”


  再次强调,Principle很强大。默认情况下每个动画效果都应用了一个 ease-in(缓动渐快) / ease-out(缓动渐慢) 效果,并且可以方便地切换为其他预定义的或自定义的效果。  





此外,此面板还允许您更改一个动画的持续时间、选择执行顺序,以及创建有意义的渐变效果。



动效面板在软件的底部,可以在这里控制所有的动画效果(和AE很像,但要高效10倍)。




以下是在之前的动效上设置了其他不同动效的效果图:





驱动器面板(Driver panel)


我花了一些时间来完全理解这个功能。一旦你掌握了,你会惊异于你能在原型中实现的效果。


驱动器主要是用于创建滚动或拖动事件,并“链接”不同的素材,或在某个项目上添加几个属性。


比方说,你希望当拖动一个素材时显示一个叠加层,或者希望当滑屏时旋转一个素材。


这些都可以通过驱动器实现。以下是案例示范:




第一步:准备素材



紫色矩形放置在画板以外,当拖动它时,一个叠加层将逐渐显示出来。




第二步: 打开软件顶部的驱动器面板,然后选中目前设为透明的叠加层矩形






第三步:在驱动器面板的对应图层中添加不透明关键帧,这样的话,紫色矩形被越往下拉,叠加层显示的颜色就越深。




这个功能需要多加练习,一旦你掌握了......(译注:原作者真是好爱用点点点,留潜台词)





 其他更多......


  当然,还有更多的小功能,如遮罩、文本、预设画板......以及针对各位Dribbblers,提供了一个录制原型演示&导出GIF的功能,方便你在粉红色的网站(译注:也就是dribbble.com了)上分享给其他设计师朋友。




【尚不完善】


  能成为Principle的beta测试用户真的很棒。我测试时是0.2版本,然后立马感受到它的巨大潜力,并爱上了它。




还有很长的路要走。



  • 提供的动效类型没有AE多,只包括:遮罩、X轴/Y轴移动、透明度、大小缩放、旋转。但也已经可以做出很多效果,专注于简洁嘛。


  • 暂不支持导入Sketch源文件,但我打赌很快就会有


  • 不支持将原型输出嵌入到Web中预览、测试


  • 软件的迭代优化还不够





【前景不错】


  我对这个软件的未来很有信心,因为我看到了Principle的团队在倾听用户的反馈并且改进。


  我想说我有点小难过,因为现在Principle开放试用了,我不得不和大家一起分享我喜欢的秘密玩具。


  但我又等不及想要看你们用它来创建各种精彩,以及伟大的原型工具将如何影响未来的每一个App。




【让你的动效设计知识更上一层楼】


如果你是动效设计的初学者,以下是一些我推荐阅读的文章:



-------------------------------------------------------------------------------------------


译者:Shunz顺子


译文地址:http://ux-sz.lofter.com/post/1ead49_7fa3f8b


欢迎订阅个人微信公众号:



日本设计特点

Ani:

摘录自侘寂(waibi-sabi)里的一段关于日本设计的原则


不均整(FUKINSEI)


不对称,奇数,不规则,不均匀。不均整被用来拒绝完美,因为大自然里没有完美和对称。



图:铃木康弘的包菜碗


简素(KANSO) 


去掉华丽,简单的东西天生就能表达自己真实的一面。整齐,干净,不复杂。



图:和田麻美子的陶瓷艺术




只保留久经考验的、非感官的基本核心要素。让人想起严厉、禁止、成熟和稳重。



图:黑川雅之的铁壶




自然(SHIZEN) 


原始、自然、自由的创新,不做作。真正的自然拒绝幼稚和偶然。



天然去雕饰的弯曲木台灯




 


幽玄(YUGEN) 


暗示而不揭露内涵。低调涵蓄,避免直接。



图:藤原敬介的倾斜花瓶


 


超凡脱俗(DATSUZOKU) 


超越习俗和传统。摆脱规则和限制的束缚。真正创新。



图:nendo设计的灯门




静寂(SEIJAKU) 


沉默,安静,幸福的孤独感。从思想、身体和环境中去除混乱和噪音。



图: Nendo为「谷口・青谷和纸」设计的和纸灯具


以上文转自设计癖 http://www.shejipi.com/7804.html




日本设计与日本文化     在日本做设计是一种文化,而不仅仅是一项技能。日本的设计师一个个都像文化人、哲学家,都能为自己的设计找到某种传统文化的基因,他们的设计都能体现对文化的关怀且具有哲理的思考。这种做设计的状态,在中国设计师的身上很难找到,尽管中国的一些设计师已开始频频在国际设计舞台上领奖,但这种奖却不能证明中国设计水准的提高。中国的设计还没有形成当代文化的设计风格,很多设计师目光短浅、重技轻道,同样在设计教育中也是如此,由此产生的一些年轻设计师或自以为是而不知天高地厚,或急功近利浮躁不安,制造了大量的无法留存后代的垃圾作品。也许我们要敞开自己的心扉,重拾本土文化的自信,认真反思,虚心学习,方能产生一批具有学术敬业精神、文化思考与哲学理念的设计大师。


日本花道最早来源于中国唐朝的佛堂供花,日本插花艺术讲究顺其自然,任何物品都可以作为花器。日本花道的艺术造型非常讲究,也是花道艺术的精髓,它由象征“天 地 人”的三条线作为基本格式,最高的一枝为天,也是整体花束的基础,最低的一枝为地,中间的一枝为人,力求均衡和比例统一的造型美,充分体现出“天人合一、宁静致远”。


天、地、人三位一体的和谐统一的思想,始终贯穿于花道的仁义、礼仪、言行以及插花技艺的基本造型、色彩、意境和神韵之中。     


由于禅宗与书道、花道、茶道结合,使日本人在倒茶时有禅,插花时有禅,棒球中有禅,书道中有禅。禅,使得日本人单调的平常生活增添了艺术的趣味。试想,如果将禅从日本人的生活中抽掉的话,那么日本的文化艺术将会变得毫无意义,从某种意义上说,日本人的性格和日本的文化就是禅。  


日本的设计艺术中,由于禅宗理念的渗入,而愈显灵性和深幽,因为禅意的设计艺术,始终表现出一种自然外物的空寂,它以"象外之象、意外之意",描绘出一个极静的空灵意境,艺术家们只有内心与外物合一,才能体会到空寂的禅意,方能步入禅宗的"即空即有,非空非有"之境。日本传统建筑中那空灵的格子窗所带来的幻象美,传统茶室里所透射出的空寂与简素气氛,还有古城京都街道所构成的素雅清静的朦胧美,其实都是在禅宗哲学思想的指导下所形成的美学特征。  


 禅宗与设计的结合往往令日本艺术家们心驰神往,浮想联翩,并成为他们表现自己文化心理结构和审美感受的最佳选择。因而,在他们的建筑、园林、插花、陶艺等设计艺术理念中,普遍认为"简单的优于复杂的,幽静的优于喧闹的,轻巧的优于笨重的,稀少的优于繁杂的"。所以在他们的创作中,他们常将那些江边暮雪、山村落日、渔舟晚唱、石幽水寂、山乡野趣等等,一些含有禅机的意象,巧妙地纳入自己用图形或形态构筑的自由王国,追求一种清远幽深的意境。


在享受自然风物之美的同时,含蓄委婉地传达出自己的心性所在。  


日本设计的起源是中国文化,中国传统文化对于日本禅宗文化。


花道艺术在于一种情感的表达与创造。通过线条、颜色、形态和质感的和谐统一来追求“静、雅、美、真、和”的意境。首先是一种道义,从培养插花人的身心和谐、有礼开始,花道又揉合园艺、美术、雕塑、文学等艺术手段,给人以一种美的陶冶。


在古代和现代的一些茶室里,只插上一枝白梅或一轮向日葵等简单的花草就能营造一种幽雅、返朴归真的氛围。




下文转载在知乎 私密君  


链接:https://www.zhihu.com/question/19707858/answer/48733716  文章中有些配图没成功 可以移到知乎查看




首先提到佐藤晃一的平面设计作品,他有着明显的民族风格。不但继承了日本文化,还将这种风格更近一步提炼了日本文化中追求的宁静、虚无、空灵的境界。



 


到底追求什么境界?又有什么内涵?

我们一步步来了解。日本的工业设计极具现实主义精神,其理念是回归到了产品设计本身,从人的需求出发。

细读日本设计界的大师著作,能很清晰的觉察到大师身上的「反思」精神,如原研哉提出的「ReDesign」观点,把每件产品已固化已形成的形态放到一边,从最初的起点去重新审视它,才能找到新的切入点,但同时他也强调设计不是「创造新产物」。不过,在现有基础之上重新定义改良往往比创造一件新事物还要难,因为当你面对牙刷时会想它「本该如此」或「全世界的牙刷都是如此」而放弃,当回归本质时才能看到新的一面。

从几位日本工业设计师的作品,我们大致可以了解「回归本质」的意思:

坪井浩尚
是日本的新锐设计师,他最大的特点是常将缺点转化为优点,他总是用佛教的思维思考事物。

坪井浩尚注意到由于杯内和杯外的温差缘故,水杯总会在桌面上留下难看的水痕,于是干脆设计一款樱花水痕杯,即使在桌面上留下水痕也是美美的。



深泽直人
他的“无意识设计”包揽了几乎世界上所有著名的设计奖项,是日本现代最为知名的设计师,看重细节的他希望可以用细节感动用户。(用心在你看不出来的细节上,让你对物对生活的感动)

这个很具有鲜明的例子,像一颗巨大的鹅卵石,有玻璃纤维制成,可以当做沙发,也可以当做咖啡桌。





黑川雅之
铸铁壶是他最为著名的设计之一。现代化社会大家习惯方便快捷,煮水通常使用较为现代感的不锈钢壶,但是在茶道里,铸铁壶占据重要位置。虽然现代具有先进的工业技艺,但铸铁壶结合了现代化生活的使用方式依旧可以融入,因为它本身的把手和壶盖设计就是一个艺术品。



左:黑川雅之设计的Irony系列铸铁壶;右:粗糙又美丽的铸铁器皿



无印良品的艺术总监原研哉
一个风靡全球的品牌,在中国也受到大爱,作为无印良品的艺术总监原研哉的风格你可能早就熟悉了。

原研哉应长野县的小布施堂的要求,设计的一款不锈钢盛酒容器。我们印象中的那些玻璃酒容器看起来似乎很剔透,其实这款白金容器简单的造型配合如镜的瓶身极具个性。经由锤炼,去除其他无用的设计,只留下最纯粹的因素,这就是设计的精髓。









佐藤大
同无印良品一样,佐藤大的设计颇负盛名,在当代日本设计界占据着重要位置。官方网站上的这样一句话「在日常生活中隐藏着许多的 ! 时刻,我们的目标就是用简洁而有力量的设计,为生活创造更多的惊叹号。」这个二维桌子就是一个惊叹号。



日本的两大因素使得其充满日系性格:一是汲取源自德国的模数体系, 工业设计就是按此体系进行发展。

二是始终追求生活的陈迹,透射出朴素,内敛的气味。此种意象刚好反映出禅宗或茶道的朴素美学和感悟天性。其中有几个元素值得我们借鉴:


FUKINSEI (不均整) 


因为大自然里没有完美和对称。也是适合禅宗所成见的“物体不完整的形状和有残破的形态”意念。




KOKOU (朴素) 


只保留久经考验的、非感官的基本核心要素。强调人与环境协调共生的人生境地,强调在微小而举座的事物和品行中体现出人道的庄严。它很容易令使用者产生亲切和怜爱之感。让物体以矮小的形状呈现,这正好反映出禅宗的客气品格和神道教的朴素美学。




SHIZEN (自然) 


真正的追求不着痕迹创造“自然”,拒绝幼稚和偶然。日本禅宗信奉:“简易的优于复杂的、幽静的优于喧闹的、轻巧的优于笨重的、独特的优于庞杂的”。正宛若海德格尔说:“人,诗意地栖居在大地”一样,人活着的最高境地是文雅地活着。




YUGEN (幽玄) 


暗示而不揭露的内涵,低调涵蓄,避免直接。幽玄之古美是一种无限深幽之处的无限意境之美。比如,在简单的眼神和无言的会意中的一种心灵神会。




SEIJAKU (静寂) 


从思想和环境中去除混乱和噪音,追求沉默,安静的孤独感,追求面对日常中的“我”内省内悟。



再来看看包装 
日语中的“依代”(よりしろ)指的是被神灵依附之物、神体,充分展现在日本的传统信仰中。而“包”的意义在于:用被神附着的自然之物来包装以体现物的价值。(《知日·设计力》特集) 
 
利用传统的包装范例。大抵可以了解日式包装之美,非常简要的抓住核心: 
;喜庆礼品则结剪刀状金银、红白或金色的绳结,预示着吉庆之路愈来愈广;丧事礼品则结钳状黑白或银白绳结,表示凶丧不再降临。日本人认为绳结之处有人的灵魂,以此表达送礼人的诚意。


喜庆礼品则结剪刀状金银、红白或金色的绳结,预示着吉庆之路愈来愈广;丧事礼品则结钳状黑白或银白绳结,表示凶丧不再降临。日本人认为绳结之处有人的灵魂,以此表达送礼人的诚意。 
 


在日本传统包装中,不管是利用自然素材的装米草包(米俵)、蒲包(藁苞),还是体现着“雅”文化的老字号名店的点心盒(菓子折り)、寿司桶(鮨桶),都体现着民间智慧和日本各地的风土与自然。


“日本传统包装展”的企划者冈秀行认为日本传统包装是谨慎、规矩的,同时也是日本设计重视素材的肌理与触感的利他态度的体现。


“日本传统包装展”的企划者冈秀行认为日本传统包装是谨慎、规矩的,同时也是日本设计重视素材的肌理与触感的利他态度的体现。 
日本出展世界博览会的工艺品以富于装饰性的造型的居多,而战后日本开始有意识地向海外输出自己的文化和美学,幽玄、空寂以及简单、合理成为日本造型特质的关键词。


日本出展世界博览会的工艺品以富于装饰性的造型的居多,而战后日本开始有意识地向海外输出自己的文化和美学,幽玄、空寂以及简单、合理成为日本造型特质的关键词。 


 
 
 



国外最优质的设计资源&工具完整清单

Ani:

要做好设计不易,眼界开阔是必须培养的,你需要不断去学习新东西。那么接下来的一大波网站,我想对你的帮助应该会挺大.




Tips:在网页端直接根据名称,输入网址就可以了,比如第一个“Freebbble: 优质免费资源.”访问网址是“www.freebbble.com”,或者直接复制到浏览器搜索也可以,就可以进入相关的网站了.




So:好东西,要记得分享哦,把内容传播给更多的人,让资源更有价值.




Best•设计资源


Freebbble:优质免费资源.


Dribbble:免费资源.


Graphic Burger:设计资源.


Pixel Buddha:职业设计资源.


Material Design UI Kit:Google Material Design 用户界面设计工具.


Premium Pixels:创意工具.


Fribbble:Gilbert Pellegrom 策展的 PSD 资源.


Freebiesbug:PSD 资源.


365 Psd:PSD 资源.


Dbf:Dribbble Behance 最佳免费设计资源.


Marvel:著名设计师的免费资源.


UI Space:手工制作的优质资源.


Free Section of Pixeden:免费设计资源.


Free Section of Creative Market:周一免费.


Teehan+Lax:DiOS 8 GUI PSD (iPhone 6).


Teehan+Lax:iPad GUI PSD.


Freepik:图像资源.


Tech&All:PSD 与科技新闻


Tethr:最好看的 IOS 设计工具包.




免费建设个人网站


HTML5 UP(html5up.net):响应式 HTML5 与 CSS3 网站模板.


Bootswatch:Bootstrap 免费主题.


Templated:CSS 与 HTML5 网站模板.


Wordpress.org: 免费建站工具.


Strikingly.com Domain:免费建站.




设计灵感


MaterialUp:Material design 设计灵感.


FLTDSGN: 最佳扁平化设计展示.


Site Inspire:Web 设计灵感.


UI Cloud:全球最大的 UI 设计数据库.


Moodboard:情绪板设计.


Crayon:营销策划.


Land-Book:产品登陆页图集.


Ocean:设计师反馈分享社区.


Dribbble:设计师作品展示.


Behance:设计展示.


Pttrns:移动 UI 模式.


Flat UI Design:扁平化设计.


Awwwards:设计创意奖.


The Starter Kit:开发者及设计师资源.


One Page Love:单页网站设计灵感.


UI Parade:UI 设计工具与设计灵感


The Best Designs:web 设计.


Agile Designers: 设计资源.


Niice:A search engine with taste.




颜色拾取器


Material Palette:可导出到 Material Design 调色板.


New Flat UI Color Picker:_


Flat UI Colors:扁平化颜色.


Coolors:颜色主题.


Skala Color:_


Couleurs:_


Material UI Colors:Material ui 调色板,支持 Android, Web & iOS.


Colorful Gradients:渐变色.


Adaptive Backgrounds:选取主色.


Brand Colors:著名品牌采用的颜色.


Paletton:_


0 to 255:颜色校验.


Colour Lovers:_


Adobe Color CC:颜色组合,来自 Kuler 社区.


Bootflat:扁平化设计色.


Hex Colorrrs:Hex 转 RGB.


Get UI Colors:_


Coleure:_


Colllor:_


Palette for Chrome:从任何图像生成调色板.




图像编辑


Canva:图形设计.


Skitch:Evernote 插件.


Easel.ly:可视化图形.


Social Image Resizer Tool:社交媒体图像优化.


Placeit:产品模具模板.


Recite:把名言变成可视化杰作.


Meme Generator:_ meme 生成器._






寻找(趋势)内容(创意)


Portent:内容创意生成器.


Google Trends:趋势搜索.


Buzzsumo:内容流行度分析.


Hubspot Blog Topic Generator:博客创意定制.


Swayy:发现互动最好的内容.




设计中能用到的图库


Stock Up:最佳素材图片大全.


Pexels:最佳图片大全.


All The Free Stock:_


Unsplash:高画质图片.


Splashbase:搜索发现免费图片视频.


Startup Stock Photos:_


Jay Mantri:_


Moveast:._


Travel Coffee Book:旅游图片.


Designers Pics:_


Death to the Stock Photo:每月免费资源.


Foodie’ s Feed:高分辨率.


Mazwai:高清视频.


Jéshoots: 现代图片.


Super Famous:荷兰设计师 Folkert Gorter 的图片.


Picography: 高清图.


Pixabay:高清图.


Magdeleine:高清图.


Snapographic:_


Little Visuals:每周电邮免费图片.


Splitshire:_


New Old Stock:免费公共资源.


Picjumbo:_


Life of Pix:高清图.


Gratisography:高清图.


Getrefe:_


IM Free:免费资源集.


Cupcake:Jonas Nilsson Lee 的图集.


The Pattern Library:模式库.


Public Domain Archive:_


ISO Republic:高清图.


Stokpic:_


Kaboompics:获取免费图片的最佳方式.


Function: _


MMT:Jeffrey Betts 的免费图片.


Paul Jarvis:高清图.


Lock & Stock Photos:_


Raumrot:高清图.


Bucketlistly:旅行图片.




设计排版


TypeGenius:字体选择.


Font Squirrel:*100%免费商业字体.


FontFaceNinja:字体选择浏览器扩展.


Google Fonts:字体优化


Beautiful Web Type:来自 Google web 字体目录的最佳字体.


DaFont:免费可下载字体归档.


1001 Free Fonts:_


FontPark:全球最大的字体归档.


Font-to-width:字体大小调整.




图标设计


Fontello:图标字体生成器.


Flat Icon:超过 16000 种字形向量图标搜索引擎.


Material Design Icons:Google 提供的 750 种开源字形.


Font Awesome:标志字体与 CSS 工具包.


Glyphsearch:图标搜索.


Withoomph: LOGO 设计.


Hipster Logo Generator:时髦 LOGO 设计.


Squarespace Free Logo:LOGO 设计.


MakeAppIcon:App 图标一键生成.


Endless Icons:扁平化图标.


Ico Moon:_ 4000+ 向量图标._


The Noun Project:数千来自不同艺术家的字形图标.


Perfect Icons:社会化图标创建工具.


Icon Finder:图标搜索.


_圆角图标: _Doodle Set | Flat Set | Vector Line Set


Icon Sweets:60 向量 Photoshop 图标.




有用的东西


UI Names:UI 随机名生成.


UI Faces:UI 头像寻找与生成.


UI Blurbs:模型的用户介绍.


Copy Paste Character:点击拷贝.


Window Resizer:查看在不同分辨率下的表现.




关于工作方面•网站推荐




帮助提高专注度的背景音乐


Noisli: 背景噪声与颜色生成器.


Noizio:放松音乐.


Defonic:声音合成.


Designers.mx:设计师精选曲目.




关于工作协作的工具


Trello:跟踪一切.


Evernote:印象笔记,你的大脑.


Dropbox:免费网盘.


Wetransfer:文件传输.


Drp.io:文件托管.


Pocket:先存后看.


Mailtoself:iOS 扩展,从任何 app 发邮件给自己.


List.ly:发现并创建清单.


Markticle: 阅读标记.




有用的新闻简报


Email1K:令邮件列表翻番的 30 天教程.


Design for Hackers:设计教学邮箱.


Startup Digest:初创企业所需的各种个性化的新闻简报.


Mattermark Daily:为投资者与创始人定制的新闻简报.


ChargeWhatYou’ reWorth:自由职业定价教程.


Product Psychology:用户行为学习.


UX Newsletter:用户体验相关新闻简报.


UX Design Weekly:用户体验设计链接.






该文转载在微信 设计夹  

网易云音乐产品分析

Ani:

研究内容


ž体验环境


ž市场定位


ž用户分析


ž产品设计


ž总结

体验环境

手机:LG nexus 5


操作系统:Android 5.0


软件版本:V2.5.1

市场定位

2013年的音乐市场已然红海,QQ音乐、酷我等大佬坐拥海量用户带领第一梯队遥遥领先,Jing FM、虾米、豆瓣等小众一点的平台因为自己鲜明的特色也有大量拥趸,网易云音乐在这个时候入场,在时间点上好像已经晚了别人好几步。而且音乐市场是一个刚需,在功能机时代,音乐播放器的覆盖率就不低。随着智能机的普及,音乐播放器就跟着无缝的迁移过来,因此音乐播放器的市场基本不会出现爆发式增长的情况,在这个增长速度相对稳定的市场,如果想要站稳脚跟并获得可观的用户量,就需要从别人手里一点一点的把用户给挖过来,难度不亚于虎口夺食。既然音乐是一个刚需,就注定了在互联网行业只要还是个头就肯定会染指这一块儿市场,百度收购千千静听更名为百度音乐、腾讯有QQ音乐、阿里收购了虾米音乐,你以为360会闲着么,告诉你360也有一个好搜音乐,只是还没有做做移动App。 就在刚刚打开豌豆荚,在音乐下发现一个“豌豆荚全新音乐产品开放内测”的专题,本以为网易云音乐就已经是一个十分冒险的产品了,结果这里来了一个更横的。前面说这么多其实只是想引出一个问题,网易云音乐在这样的市场环境中是怎么给自己的产品定位的。


用丁磊自己话说,他认为当时的音乐类App其实就是一个音乐播放器,有很多的优秀作品没有被广大的用户发现,他想做一个有社交功能的音乐平台,希望平台能够像个朋友告诉你什么歌曲好听,然后让你去试试,让更多的人能够发现更多适合个人的优秀音乐作品。可能正是基于对这种音乐App方向的自信,才让丁磊在竞争如此激烈的时候进入移动音乐市场的吧。

用户分析目标用户特征

根据网易云音乐发布的2014年中国移动音乐用户行为分析报告,可以详细了解可以得出网易云音乐用户特征,我在这里做一下总结:


年轻:85后移动音乐听众主流,90后占比最高。


女性用户占有明显优势:移动音乐领域,男性用户占38%,女性用户占62%


用户更多分布于经济较发达地区:沿海地区用户占比大于内陆,城市用户占比大于乡镇


用户比较壕:网易云音乐使用者月收入明显高于整个音乐软件行业使用者的平均水平


iPhone用户活跃度最高:Android用户绝对数量明显高于iOS用户,但iOS用户活跃度最高


听歌时间跟空闲无聊时间成正比:白天听歌人群从7点开始显著上升,在13点到14点间有一个峰值,下午18点以后听歌人数又有一个显著的连续上升趋势,23点打到峰值,然后听歌人数急剧下滑。

用户数量

同样网易云音乐发布的2014年中国移动音乐用户行为分析报告,截止2014年12月18日,网易云音乐注册用户数量为5500万。对于一个发布不到两年的产品,这是一个非常不错的成绩。

使用场景

ž上下班乘坐公交地铁途中


ž工作当中


ž晚间放松休息


ž睡前


使用场景行为特征分析:上下班途中有较集中的时间块儿,又由于四周环境十分嘈杂,集中的时间块儿也被分成了碎片化的时间,用户比较适合:听音乐、看新闻、看视频、IM、朋友圈。在这个场景里面听音乐又是用户使用成本最低的操作,而且还可以和看新闻、IM和朋友圈同时使用。在公交途中的信号不稳定性,还有基于流量费用方面的考虑,导致用户在这个场景下更适合选择听本地歌曲。晚间休息时间,相对于其他时间段,用户在这个时候可以更放松的去听音乐,在时间上也更加宽裕,这个时候的用户会更有精力和意愿去定向搜索新的音乐。

使用目的

ž放松压力


ž休闲打发时间


ž帮助睡眠


ž单纯聆听音乐

产品设计产品信息结构

从各种关于网易云音乐的报道来看,网易云音乐这款产品的核心竞争力是在音乐推荐方面,基于此网易也应该在这方面的做了大量的工作,就我个人而言,推荐的音乐还是非常合我的口味。以下是我梳理的网易云音乐的产品信息结构图,按优先级标号做了排序。在这里需要说明一下的是在网易云音乐中,歌曲是以歌单为基本单位做的推荐,其中电台可以看成是一种形式较为特别的歌单。





核心流程

核心流程是我根据上面的信息结构图结合网易云音乐App梳理出来的,和真实的网易云音乐有一点出入,在后面会做具体解释说明。






1.优先级1:关于音乐的推荐是网易云音乐的主推的功能点,是最能体现丁磊和他的愿景最直接的功能,这也是网易云音乐备受推崇一个很重要的原因。因此将他的优先级放在第一位。


2.优先级2:播放音乐是任何一个音乐类App的基本功能,正是因为这样,我将它放到第二的优先级上,做好了这个功能的不一定是优秀的App,但是做不好肯定不会得到用户的认可。


3.优先级3:用户主动搜索音乐也是一个非常重要的场景,用户对这个场景下的搜索结果忍耐度是比较低的,所以这一块对整个产品的用户体验是非常重要的一个环节。因此把它放在第三位。


4.优先级4:社交功能也是网易团队着重开发的一个功能,在前面的功能铺好路以后,这是网易团队希望体现产品差异性的功能,所以我把他放在第四位。


关于游客试用:只有在首次用户手机号登录才需要注册,其他都是第三方授权登录。关于游客试用,可以使用关于听歌方面的几乎全部功能,只是在社交功能那一块功能实现不了全部功能。



产品功能结构

因为产品的功能结构在产品出来以后是一个比较直观的东西,所以整理的时候就只是整理了一些重要的功能结构。





交互及页面设计

发现






关于网易云音乐大红色的主题,喜不喜欢看个人喜好,我第一次进来的时候只是被这个红色的主题颜色给震住了,在大家都在走清新风格的时候,它走霸气磅礴风,当时并不是很喜欢,只是看着看着也就习惯了。网易云音乐已经接入广告,考虑到我们免费就能下载320 Kbps的音乐,也不能要求太多,而且感觉这个广告做的还是跟整个页面很搭配的,不知道是不是在朝着原生广告的方向发展。热门推荐放在首位,个人认为是为了解决由于推荐算法产生的用户所听歌曲太过单一的问题。


我的






在这个页面能够非常方便的管理本地音乐,个人觉得,在网易云音乐中下载的音乐都要选择一个已有歌单或者创建新歌单,因此在用户下载音乐时就强制用户给自己的音乐分类了,所以在我们准备听本地音乐的时候查看创建歌单的优先级要提高。


个人的修改想法:






个人想法:为了提高查看我创建的歌单的优先级,我将管理本地歌曲的列表类别变成了两列,在第一页留出更多的空间来展示自己创建的歌单列表,用这种方式来提高创建歌单的优先级。为了更加方便用户通过创建的歌单来,可以让用户自定义歌单顺序,现在的默认的方式是按创建歌单的时间排序。


朋友






播放






在这个地方就要提一下前面的核心流程图中的那个问号,根据我梳理的逻辑,已经下载的音乐是不能下载的,在网易云音乐中,功能上也是这样进行设计的,只是在播放页面的时候不管是否已经下载了该歌曲都有一个下载按钮,所以的想法是在歌曲已经下载的情况下,可以把下载按钮去掉。

总结

从我个人感觉来看,网易云音乐还是一个很有诚意的音乐产品。在功能上表现比较全面,又不会有那些你不想要的乱七八糟的东西,我曾经下过一个同类型的 App,装上第一使用后,发现桌面上瞬间多了三个图标和一个让人非常不爽的浮窗,略微有点强迫症的我直接就把它卸载了。还有一个受到很多人称赞的地方是在网易云音乐上可以免费下载 320 Kbps 音乐。


关于网易云音乐的红色的主题这是一个个人喜好问题,只能说他在同类  App 中显得很另类,给我个人的感觉是大气,耐看。大气我想大家应该没有什么太大的意见,关于耐看其实在我来说就是刚开始的时候并不是很喜欢这个主题颜色,用着用着就慢慢习惯,以至于觉得越来越好看。


网易云音乐也在通过版本的迭代逐步细化完善一些细节。之前在 “朋友” 页面,title 下面的“动态”、“附近”、“好友” 是可以通过在 “最近联系人” 上面的区域左右滑动来切换的,然后在下面的区域左右滑动优势全局滑动,因此在手势操作上容易造成误操作,最新的版本则只有全局滑动的切换手势。


网易在内容上有自己的独到之处,从他的网易新闻、有道词典、网易公开课就能感受到他在内容方面深厚的功底。网易云音乐,在功能上已经是在行业内处于优秀行列,再加上网易在内容上的优势,网易云音乐在音乐这块市场上对于现在处于绝对优势的第一梯队产品是一个很大的威胁,而且这个威胁会持续存在,并不断扩大。


PS: 本来年前就这整理这个,但是最近几天感觉根本就没有精力整理这个东西,年后这几天会更没有时间。所以在新年的第一个凌晨把整理好的东西弄出来,要不然等上班后再弄,说不定又要重新梳理。还是希望大家能多多支持,多多点赞,多多讨论,然后我们争取一起进步。






 推荐拓展阅读






文/小马达(简书作者)
原文链接:http://www.jianshu.com/p/1ed21290ef77
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。