[{"data":1,"prerenderedAt":184},["ShallowReactive",2],{"navigation":3,"post-\u002Fposts\u002F2013\u002Fwin8-app-develop-study-design-logo":20,"surroundPosts-\u002Fposts\u002F2013\u002Fwin8-app-develop-study-design-logo":173},[4,8,12,16],{"title":5,"path":6,"stem":7},"首页","\u002F","00.index",{"title":9,"path":10,"stem":11},"文章","\u002Fposts","01.posts",{"title":13,"path":14,"stem":15},"动态","\u002Fmoments","02.moments",{"title":17,"path":18,"stem":19},"关于","\u002Fabout","09.about",{"id":21,"title":22,"body":23,"class":153,"cover":153,"coverSize":153,"date":154,"description":29,"draft":155,"extension":156,"hideComments":155,"location":157,"meta":158,"navigation":159,"path":160,"readingTime":161,"seo":166,"sitemap":167,"stem":168,"tags":169,"time":171,"weather":153,"__hash__":172},"posts\u002Fposts\u002F2013\u002F20130419.win8-app-develop-study-design-logo.md","Win8 应用开发学习记录 —— Logo 设计",{"type":24,"value":25,"toc":149},"minimark",[26,30,33,36,39,42,47,50,53,56,66,69,72,76,79,82,86,89,92,95,99,103,107,111,115,119,122,126,129,132,135,139,143,146],[27,28,29],"p",{},"Surface Pro 到手也有一段时间了，也把玩了这么些天，今天终于开始来写 Win8 的应用了。",[27,31,32],{},"环境搭建什么的就不详述了，Windows 8 Pro+Visual Studio 2012。",[27,34,35],{},"我想做的是 Win8 上的二维码应用，应用商店里有不少，但良莠不齐，大多都是英文的，中文的寥寥无几，而且质量都比较差。所以我准备做一款优秀的 QR Code For Win8 的应用。",[27,37,38],{},"一个好的应用，很重要的一点是用户体验，而用户体验的第一点就是 Logo，尤其在 Win8 界面下，Logo 是尤为重要的，下面是几个应用商店中我认为很不合格的 Logo：",[27,40,41],{},"（以下是在应用商店里搜索 Qr Code 出现的第一列应用）",[43,44],"post-image",{"filename":45,"description":46},"01.png","Win8应用商店里搜索Qr Code出现的第一列结果",[27,48,49],{},"除了“Magnet QR Code Generator”勉强符合 Win8 风格外，其余均是不合格的。不合格原因是五颜六色或者过于杂乱。",[27,51,52],{},"说到二维码，第一感觉自然是以二维码本身作为 Logo 最为直观，我起初也是这样的打算，下面是我的第一个想法：",[43,54],{"filename":55},"02.png",[27,57,58,59],{},"想法是，QR Code For Win8，于是中间一个 Win8 的标志，外面是二维码，二维码本身采用的是“",[60,61,65],"a",{"href":62,"rel":63},"http:\u002F\u002Fwww.haoest.com%E2%80%9D%E7%9A%84%E9%93%BE%E6%8E%A5%E3%80%82",[64],"nofollow","http:\u002F\u002Fwww.haoest.com”的链接。",[27,67,68],{},"然而，它在 Win8 开始菜单中显示效果格格不入。",[27,70,71],{},"下面是 Win8 自带的几个应用的 Logo：",[43,73],{"filename":74,"description":75},"03.png","Win8自带的几个应用的Logo",[27,77,78],{},"其特点是简洁、清爽，以白色前景色为图案，彩色为背景色。",[27,80,81],{},"于是，经过一段时间的构思和设计，我后来重新设计了 Logo 如下：",[43,83],{"filename":84,"description":85},"04.png","新设计的二维码Logo",[27,87,88],{},"外面一个 Q，里面是个 Win8 的标志。",[27,90,91],{},"Logo 原型设计好了，下面开始为 Visual Studio 的需要进行适配了。",[27,93,94],{},"在 Visual Studio 中，你需要为 Win8 应用准备多种尺寸的 Logo：",[43,96],{"filename":97,"description":98},"05.png","徽标——最基本的Logo，开始屏幕的方格Logo",[43,100],{"filename":101,"description":102},"06.png","宽徽标——在开始屏幕中放大后占两个的Logo",[43,104],{"filename":105,"description":106},"07.png","小徽标",[43,108],{"filename":109,"description":110},"08.png","应用商店徽标",[43,112],{"filename":113,"description":114},"09.png","徽章徽标——用于锁屏应用在锁屏时显示，不是必要的",[43,116],{"filename":117,"description":118},"10.png","初始屏幕徽标——打开应用时出现的Logo",[27,120,121],{},"需要注意的是，你所生成的这些不同尺寸的图片只需要前景色的白色就行了，无需背景色，因为背景色可以在前面进行统一设置，这样的好处是，你可以随时把背景色换成你喜欢的颜色。",[43,123],{"filename":124,"description":125},"11.png","可方便更改背景色",[27,127,128],{},"在这点上，我吃了大亏，之前的背景色是蓝色的，我也没有注意到这点，导致生成的所有图片都带有蓝色背景。再后来我想改成深灰色的时候，费了好长时间，最后发现了这个问题，又花了同样的时间，把深灰色背景色去掉，换成透明背景色。",[27,130,131],{},"上图中的“短名称”是显示在开始屏幕的 Logo 左下角的名称，前景文本指的就是这个名称的颜色，有深浅两种选择，分别为黑白两色。图块中的背景色指的就是上面所有的 Logo 徽标的背景色。而初始屏幕的背景色可以单独设置，如果为空，则使用图块的背景色。这样一来，你就可以方便的更改背景色了。",[27,133,134],{},"下面分别是我的 Logo 的两种显示效果：",[43,136],{"filename":137,"description":138},"12.png","QR Code Logo 显示效果1",[43,140],{"filename":141,"description":142},"13.png","QR Code Logo 显示效果2",[27,144,145],{},"怎么样，是不是与 Win8 风格很一致呢？",[27,147,148],{},"好的 Logo 是一个应用的开始，嗯，今天的工作就到这里，我也该睡觉了。",{"title":150,"searchDepth":151,"depth":151,"links":152},"",2,[],null,"2013-04-19",false,"md","宿舍",{},true,"\u002Fposts\u002F2013\u002Fwin8-app-develop-study-design-logo",{"text":162,"minutes":163,"time":164,"words":165},"4 min read",4,240000,800,{"title":22,"description":29},{"loc":160},"posts\u002F2013\u002F20130419.win8-app-develop-study-design-logo",[170],"技术","01:27","VndOsU3KvQ-xAY9ETuF1cckQ2KN52liYm-HBzdpjVa4",[174,179],{"title":175,"path":176,"stem":177,"date":178,"description":150,"children":-1},"为 WordPress 主题添加阅读统计的功能","\u002Fposts\u002F2013\u002Fpost-views-for-wordpress-themes","posts\u002F2013\u002F20130510.post-views-for-wordpress-themes","2013-05-10",{"title":180,"path":181,"stem":182,"date":183,"description":150,"children":-1},"反思：不要偷懒，要自力更生","\u002Fposts\u002F2013\u002Fself-reflection-about-lazy-and-friendship","posts\u002F2013\u002F20130306.self-reflection-about-lazy-and-friendship","2013-03-06",1777579151117]