Home Sign Up Sign In
rayps
V2EX  ›  设计

分享一个关于app icon设计的想法并求助相关知识。

  •   
  •   rayps · Mar 30, 2013 · 5675 views
    This topic created in 4803 days ago, the information mentioned may be changed or developed.
    我是一名刚入行的UI设计师，
    据我所知目前没有一种比较真切的方法预览我们自己所设计的 App icon，
    光凭那张生硬的效果图并不能真正感受到icon的最终效果。
    而且效果图也很难做到与最终效果一致。

    昨天在一次讨论中突然想到一个idea
    我们其实可以利用webapp的icon特性去测试我们所设计的icon,
    并且能够真正去感受它，
    我刚才已经凭着自己浅薄的前端知识加上网路搜寻勉强做出了一个测试demo
    现在可以尝试拿出iPhone，
    使用自带的浏览器safari 打开“icon.rayps.com”，然后添加到主屏幕即可。

    我的想法主要是这样的，场景假设：
    设计师想测试自己的图标时，只需要在电脑端的浏览器打开一个网页
    我们现在假设是 www.icontest.com
    呈现出来的是一个 “选择文件” 的按钮，要求是57/114等标准尺寸，当然也可以拖放文件
    当上传完毕之后网页会提供一个独一无二/包含随机字符串的网址给设计师，
    继续假设 例如 www.icontest.com/a1b2c3 又或者是?=a1b2c3 之类的
    接下来设计师只需要在手机上做添加到主屏幕的操作即可。

    我的疑惑是，请问要实现这个想法需要学习哪几个方面的知识？
    有没有现成的第三方组件可以便于实现？
    是不是需要有一个存放文件的服务器 / 有没有相关开放功能的网盘？
    我大概需要怎么实现？
    谢谢。
    Supplement 1  ·  Mar 31, 2013
    感谢25楼的 @dingyi ：https://www.flinto.com/icon_strikes/new
    原来已经有人实现我这个想法了，而且比我想象中要完美。
    而且网址是固定的，我猜应该是根据ip地址识别的。
  • icon
  • com
  • 设计师
    28 replies  •  1970-01-01 08:00:00 +08:00
    alexrezit
        1
    alexrezit  
       Mar 30, 2013
    十分钟就能实现.
    subpo2
        2
    subpo2  
       Mar 30, 2013
    我不知道一般测试icon是什么办法，但是应该不至于这样繁琐...
    要做这个其实还是很简单的，PHP,Python,nodejs任意学一个，学个入门就行了
    是需要一个存放文件的服务器，可以在网上买VPS，也可以用免费的各种云服务
    subpo2
        3
    subpo2  
       Mar 30, 2013
    @alexrezit 好吧...我原先想说一天
    alexrezit
        4
    alexrezit  
       Mar 30, 2013
    @subpo2
    十分钟做出来的肯定效果不好啦.
    等有空我用 Flask 试试, 还没用 Flask 做过东西呢.
    astnd
        5
    astnd  
       Mar 30, 2013
    ....找你们开发换上试试就可以了

    或者做个效果图放在手机里看。

    你觉得把图片上传到网页 生成网址 手机上打开 将网页设在桌面上 看图标 这样轻松？
    还是 准备一个桌面的PSD 图标往上一放 导入手机 看图标 这样轻松？
    ifournight
        6
    ifournight  
       Mar 30, 2013   ❤️ 1
    我理解的@rayps所说的"不能真正感受到icon的最终效果"大概是这个意思, 不知道理解的对不对:
    1. iPhone, iPad真机渲染毕竟和电脑屏幕不一样
    2. 不能测试多个背景图, 与其它图标搭配在一个Home Screen的效果
    3. 不能感觉真正把iPhone拿在手里看icon的效果
    4. 不能看看icon的移动和删除动画效果.

    你的想法大概是利用safari可以添加web app icon做一个为大家服务的网站, 应该可行, 不太清楚web app icon的最终效果是不是和app icon一样, 比如说分辨率什么的.

    如果要测试icon的话我觉得可以这么做:

    - 下载iPhone, iPad的Home Screen PSD文件.
    - 收集自己想测试的背景, 壁纸, 和搭配的其它icons.
    - 把自己的icon放到psd里, 然后用Skala Preview[http://bjango.com/mac/skalapreview/]就可以直接在真机上看到效果了
    alexrezit
        7
    alexrezit  
       Mar 30, 2013
    @astnd
    @ifournight
    有一些 non prerendered icons 没有 glow highlight, 难道要 designers 每次都自己加?
    而且真机的色彩和设计师的机器会有很大的色差.
    rayps
        8
    rayps  
    OP
       Mar 30, 2013
    @astnd

    我想解决的问题是
    1.找开发会很繁琐，最好能独立完成预览，因为设计一个图标可能要预览20次以上。
    2.效果图太过生硬，现在的传统方式就是这样，把效果图导入到相册图库路面预览，或者用skala/PSview之类的app，它们都是静态的，图标都只是由photoshop模拟ios图标渲染的，这些正是我需要解决的问题所在。

    很感激@ifournight 能理解我的意思，

    另外忘了说，这个想法也是把图标工作给客户审阅的最佳方案。
    rayps
        9
    rayps  
    OP
       Mar 30, 2013
    先暂时不说 测试图标在一屏幕图标之中的眼球搜索效果，不同壁纸显示效果，抖动效果等等。
    用photoshop模拟homescreen会出现很多细节上的问题，
    例如图标反光和阴影的样式参数并不详细，只能粗略模拟，还有图标边缘问题很严重。
    已经横向评估过各种homescreen psd，细节上都不够执着
    astnd
        10
    astnd  
       Mar 30, 2013
    @rayps 细节不够执着的话 直接截屏有没有达到“完全模拟”呢？
    ihuguowei
        11
    ihuguowei  
       Mar 30, 2013
    http://weibo.com/u/3205782242
    是不是类似功能呢？已经有相关ps插件了。实时预览。当然不止这一款。PS view 也是。
    rayps
        12
    rayps  
    OP
       Mar 30, 2013
    @ihuguowei 这依然还是当今的传统模式，现在所有设计师都是用这类的，因为这样的预览方式才造成了我想要改变的原因。这种方式实在是太不贴合实际了，它的效果只能是一张全屏的图片而已。
    rayps
        13
    rayps  
    OP
       Mar 30, 2013
    @astnd 一个不完美的homescreen psd 就算截屏之后也是一样的。
    rayps
        14
    rayps  
    OP
       Mar 30, 2013
    @astnd
    @ifournight
    @alexrezit
    @ihuguowei
    各位很感谢你们愿意花时间阅读我这篇难以理解的帖子，
    我承认是我表达能力太差。
    希望你们可以试试我帖子里面提到的demo，
    然后再与现在传统的静态预览模式做对比，去感受一下，
    再次感谢你们！
    ifournight
        15
    ifournight  
       Mar 30, 2013
    @rayps 刚才没看到是设计节点就在大言不残…

    我开发和设计都很弱, 但是也想帮到你.

    午觉之后我查了下iOS Human Interface Guidelines, 对于Web Clip Icon, Apple也是的提供的png文件, 建议分辨率也是retina下的114x114. 这才去试试你提供的demo和V2EX的Web Clip Icon发现确实如你所说可以达到实机测试的效果.

    具体如何实现, 我不懂web开发和服务器帮不到你. 但是竟然你提到了"传统模式的不足"和设计一套"把图标工作给客户审阅的最佳方案", 那这个服务就必须是成熟的.

    目前有那么多psd Live Preview的app, 将真机图标测试的app为什么没有, 我想肯定是有技术上的原因的:

    - 就算你做成傻瓜式在Mac上输入网址, 添加图片, 生成地址, iOS上打开safari, 打开地址, Add to Home Screen. 然后你改一个图标, 就得导出来一次, 再要重复上面的操作, 这也不能称做快捷, 成熟的解决方案.
    - 你尽然要做, 就要达到一个什么效果: OSX有个app, iOS有个app, OSX打开, 能够直接auto send psd或你拖拽的图片到iOS app. iOS app一键添加到桌面, 这才叫解决方案.

    - 现在没有这么一个服务, 我觉得主要问题就在Apple应该没有一个API有XXAddToHomeScreen的功能. 至于iOS能不能像OSX一个可以可以用Automator写AppleScript来定制一个Workflow来完成这系列动作我就不知道了. (我是初级iOS开发者, Documentation很多没看)

    所以你可以问问比较有经验的开发调查清楚了, 如果确实有可行性再去做, 如果做成了, 那就大大方方的放出来卖钱~
    rayps
        16
    rayps  
    OP
       Mar 30, 2013
    @ifournight 谢谢你，我觉得你说得很有道理。虽然我的想法确实可以解决很多跟视觉测试相关的问题，但确实很多设计师都不太愿意每次都要重复这几个步骤，这始终无法一劳永逸的真正解决问题，当解决一些旧的问题之后随之又会迎来新的问题。

    我记得我很久之就曾经因为chrome 浏览器为什么没有添加到主屏幕的功能而得知ios并没有开放这一api。

    我认真想了一下，我这个东西最多只能成为设计师最后一步才会用一下的东西，而不会整个过程中都会用这个东西。
    Betty
        17
    Betty  
       Mar 30, 2013
    楼主的想法非常好，支持楼主做出来~
    服务器嘛找个免费空间就可以了。
    技术方面，你遇到什么不会的地方再具体地问，现在问得太空泛，大家也很难回答 ：）
    rayps
        18
    rayps  
    OP
       Mar 30, 2013
    @Betty 有兴趣的话可以右键看看源代码，那个“[email protected]” 就是要改变的内容，其他都是不变的，也就是只需要接收到用户上传的图片到某个地方，然后返回图片的URL然后替换进去就OK了。

    我也不太会问问题，其实我觉得回答得不详细对我来说是件好事，
    因为我更喜欢自己动手一步一步去自己完成，
    而不是让别人一下子就帮你搞定了，
    所以我主要是想只问个大概，让我知道该如何出发。
    Betty
        19
    Betty  
       Mar 30, 2013
    @ifournight 说的，和楼主说的相比，好像也没有省略几步呀。
    “OSX有个app, iOS有个app, OSX打开, 能够直接auto send psd或你拖拽的图片到iOS app. iOS app一键添加到桌面, 这才叫解决方案”
    电脑上这个 app 就是浏览器，iOS 上这个 app 也是浏览器。电脑上浏览器打开，拖拽图片过去，iOS 浏览器点“添加到桌面”。
    这过程不是一样的嘛……要说差别就是多了一个输入网址的过程。
    为了简化输入网址的过程，我建议，摆脱随机地址，以用户登录的方式实现“打开 www.icontest.com 看到就是自己最近上传的图标”。他不是把这个网址都加到主屏幕了么，点开这个网址没法再方便了吧。
    电脑端还可以写一个脚本，监视某个目录，有改变就自动上传。
    这样，过程就是，（保持在登录状态下）点开 iOS 主屏幕上这个图标，点“添加到主屏”，就可以查看实际效果了！
    ihuguowei
        20
    ihuguowei  
       Mar 30, 2013
    @rayps 不好意误解了你的意思，你的意思是：可以利用你的网站将图片当作app添加到设备主屏幕，然后这样能够更加真实的表现设计效果。
    astnd
        21
    astnd  
       Mar 30, 2013
    @rayps 我理解你的意思 只是觉得输入网址也是一件非常麻烦的事情 或许可以开发一个简单的App 网页端上传图片 App直接推送网址 或者是手机上传图片 直接生成网址 这样的流程或许可以简化 用户也就不用手动输入 或者是用一些其他的工具来传网址了。
    summic
        22
    summic  
       Mar 30, 2013
    可以这么做：
    每次打开homescreen的web app，是会拉取最新的 apple-touch-icon 的
    只要给个上传入口，加上身份识别，就可以了。

    参考 Sun 这个webapp
    plidezus
        23
    plidezus  
       Mar 30, 2013
    桌面截图一样，然后用psd抠好图标的外观。
    使用psview，在ps中将新图标贴上去，在手机上立即看到效果。

    没必要反复发明轮子，只是想看一眼效果而已……上传打开浏览器保存这个步骤好麻烦……
    alexrezit
        24
    alexrezit  
       Mar 30, 2013
    @rayps
    给你发了一封邮件.
    dingyi
        25
    dingyi  
       Mar 30, 2013   ❤️ 1
    https://www.flinto.com/icon_strikes/new
    Dzinlife
        26
    Dzinlife  
       Mar 30, 2013
    一个智能对象就解决的事情，楼主想太多
    johnil
        27
    johnil  
       Mar 31, 2013
    <link rel="apple-touch-icon-precomposed" href="http://(57px).png" />
    <link rel="apple-touch-icon-precomposed" href="http://(72px).png" sizes="72x72" />
    <link rel="apple-touch-icon-precomposed" href="http://(114px).png" sizes="114x114" />
    估计楼主你需要的是它吧.

    详细资料:
    http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
    rayps
        28
    rayps  
    OP
       Mar 31, 2013
    @johnil 嗯，正是因为知道有这个才想到的。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2900 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 76ms · UTC 07:45 · PVG 15:45 · LAX 00:45 · JFK 03:45
    ♥ Do have faith in what you're doing.