V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sdjl
V2EX  ›  外包

外包成功案例展示, 给设计世博会大楼的公司做的官网

  •  
  •   sdjl · 2013-08-21 16:00:31 +08:00 · 2337 次点击
    这是一个创建于 4123 天前的主题,其中的信息可能已经有所发展或是发生改变。
    客户网站: http://teamminus.com
    客户是做建筑设计的, 在五道口, 代表作有世博会的大楼等

    由我们团队设计+开发, 设计费用1w, 开发费用1w, 一共2w

    提供完整的后台编辑和管理功能, 所有文案和内容都可以自行修改, 比如导航中的title, 以及按钮的文案, 甚至背景图的切换速度和时间等.

    整站使用单页面多个div切换的方式设计, 不刷新页面(除了换语言), 且考虑了图片的加载优化.

    我们坚持网站外包是一种服务, 而不是贩卖商品, 优质的服务才会有优质的成品, 感谢你对我们团队的支持, 我们就是那个喋喋不休的~~ sparker5 :)
    38 条回复    1970-01-01 08:00:00 +08:00
    for4
        1
    for4  
       2013-08-21 16:33:28 +08:00 via Android
    可以再补充一下开发时长吗?
    sdjl
        2
    sdjl  
    OP
       2013-08-21 16:49:09 +08:00
    @for4 设计上比较啰嗦, 因为要反复和客户的负责人对接, 另外客户还要和公司领导沟通, 然后再反馈给我们, 又反复修改. 因此设计上大概前前后后持续了一个半个月的时间. 当然这个时间内我们也在做其它事情.

    这也是为什么设计我们要收取1w费用的原因. 如果客户自己设计, 就可以免去这部分费用.

    设计完成后, 开发用了不到一个星期.
    brianlai
        3
    brianlai  
       2013-08-21 17:55:17 +08:00
    @sdjl 楼主的联系方式是?
    GinoSin
        4
    GinoSin  
       2013-08-21 18:00:16 +08:00
    你们那个插件库貌似经常闪屏啊~~~
    sdjl
        5
    sdjl  
    OP
       2013-08-22 00:28:11 +08:00
    @brianlai sdjllyh at gmail.com

    @GinoSin 你说的是fx么? 哪一个fx?
    spark
        6
    spark  
       2013-08-22 11:35:44 +08:00   ❤️ 1
    首页由于图片太大, 在单位200k小水管白屏了小一分钟啊...

    那几张大图还有很大的压缩优化空间啊, 为什么不呢?
    sdjl
        7
    sdjl  
    OP
       2013-08-22 11:50:54 +08:00
    @spark 嗯, 我优化一下先保证第一张图片展示出来再加载第二张大图

    使用大图是客户的硬性要求
    RW667
        8
    RW667  
       2013-08-22 11:52:53 +08:00   ❤️ 1
    这种单页面真心 不想看到竖向滚动条..可是滚动条无处不在。。

    另外,多切换几次后,明显切换会变得很卡 。。
    spark
        9
    spark  
       2013-08-22 11:53:50 +08:00
    @sdjl 都不用什么工具, 直接用PS的 save for web -> 质量在75%, 就可以压掉50%的文件大小.
    sdjl
        10
    sdjl  
    OP
       2013-08-22 11:58:48 +08:00
    @RW667 没有滚动条的话小白就不知道如何是好了
    卡的问题, 我再测试测试, 我也感觉卡, 但不知道什么情况下会出现

    @spark 只能通过改变加载顺序让体验变好, 不能压缩图片质量....
    sdjl
        11
    sdjl  
    OP
       2013-08-22 12:06:55 +08:00
    感谢所有提供bug信息, 体验不好的信息的朋友
    saharabear
        12
    saharabear  
       2013-08-22 12:07:28 +08:00
    看着这图片,够清晰的。
    alexrezit
        13
    alexrezit  
       2013-08-22 12:10:00 +08:00
    真心卡出翔了... 建议在加载完成之前加一个 loading view 盖住.
    est
        14
    est  
       2013-08-22 12:18:21 +08:00   ❤️ 1
    @sdjl 图片太大了。需要优化。我这里卡的不行。


    原文件:1MB
    http://teamminus.com/img/upload/Image/100_2000x.jpeg

    优化后:201KB



    可以对比看看有没有啥细节损失。
    eary
        15
    eary  
       2013-08-22 13:23:29 +08:00
    首页图片加载方式有问题、栏目切换加载方式有问题。交互差。
    sdjl
        16
    sdjl  
    OP
       2013-08-22 13:33:33 +08:00
    @est 谢谢, 你是通过什么方法压缩的?

    @eary 嗯, 这个知道的, 会解决
    est
        17
    est  
       2013-08-22 14:18:18 +08:00
    emric
        18
    emric  
       2013-08-22 14:19:11 +08:00
    @sdjl
    在载入方面的却不近人意.
    可以试试涛哥的cssgaga,在保证良好的压缩率同时亦能保持较低的失真率.
    mlc880926
        19
    mlc880926  
       2013-08-22 14:25:01 +08:00
    502??
    justfindu
        20
    justfindu  
       2013-08-22 14:27:48 +08:00
    图片可以保存成渐进式~ 提高体验~

    slideshow 好闪啊~
    shuaige
        21
    shuaige  
       2013-08-22 14:33:16 +08:00
    @sdjl 发邮件没回。有个外包,留下你QQ,详谈~
    passluo
        22
    passluo  
       2013-08-22 14:40:53 +08:00
    这。。。。不好评价啊。。。。

    呵呵后。。
    thinkif
        23
    thinkif  
       2013-08-22 14:58:34 +08:00
    挺好的,没感觉到卡

    不过,就是腾讯分析的按钮有点。。。
    izon90
        24
    izon90  
       2013-08-22 15:05:26 +08:00
    好静态
    bzw875
        25
    bzw875  
       2013-08-22 15:34:27 +08:00   ❤️ 1
    楼主 ie8 分辨率1440*900下图片的宽被压缩了一些,感觉有些模糊.
    moxuanyuan
        26
    moxuanyuan  
       2013-08-22 15:42:16 +08:00
    我想知,你们开发后台编辑和管理功能,是不是专门为这个网站开发,还是本来就有一套现成的?
    Maninlab
        27
    Maninlab  
       2013-08-22 16:07:58 +08:00
    建筑设计公司都喜欢这么干。以为都是艺术家。:(
    sdjl
        28
    sdjl  
    OP
       2013-08-22 16:16:52 +08:00   ❤️ 1
    @mlc880926 刚才在线调试了一下

    @est 嗯, 这个不行, 因为不能要求客户自己去压缩, 我用convert压缩了

    @shuaige 好的, 我看邮件回你, 最近几天比较忙, 接了一个口袋购物app的相关的外包

    @bzw875 谢谢, 我刚才用convert把图片质量压缩到50%, 尺寸也改小了一些, 可能影响到了图片质量. 估计只有同时压缩图片+优化图片加载顺序

    @moxuanyuan 我们有自己的基于webpy开发的代码库, 也算是一个可以重复使用的框架, 对于这个网站的后台, 只需要写一个配置文件就可以自动生成了, 配置文件大概如下:


    可以在配置文件中设置数据的添加,删除,修改,图片裁剪,搜索,提示,验证,布局,排序,过滤,隐藏数据等等功能, 这些功能都是预先写好根据model文件中mysql表定义生成的, 只需要在配置中说需要什么功能, 后台就有了, 后台的大概样子是:



    这是我们自己开发的python建站框架, 叫做zarkpy
    sdjl
        29
    sdjl  
    OP
       2013-08-22 16:28:42 +08:00
    我们每个项目的代码都差不多, 思路差不多, 方法差不多, 部署等程序都一样.

    后台一样, 只是配置不一样, 主要工作在于与客户沟通, 设计, 以及前端开发
    skyahead
        30
    skyahead  
       2013-08-22 16:36:56 +08:00   ❤️ 1
    iPhone 上从欧洲访问,2分钟左右才能load完首页。然后图片切换的时候好像重新load,结果就是不停的load,load,load。。。。建议对手机优化?

    mac上访问很卡(图片切换的时候)。
    sdjl
        31
    sdjl  
    OP
       2013-08-22 16:40:32 +08:00
    @skyahead 我们不打算对手机优化, 因为客户不买这个单 :)

    背景图片切换的时候么? 谢谢提醒
    skyahead
        32
    skyahead  
       2013-08-22 16:46:40 +08:00
    背景图片切换再macbook上有明显的停顿感。
    sdjl
        33
    sdjl  
    OP
       2013-08-22 16:57:53 +08:00
    @skyahead 我缩短了背景图片切换的速度, 再看一下是不是有好转?
    skyahead
        34
    skyahead  
       2013-08-22 17:09:00 +08:00
    感觉不明显。我觉得让图片渐进效果会很好。google了一个,下面两个plugin感觉不错。。。

    http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/

    http://www.htmldrive.net/items/demo/914/Nice-jquery-full-background-image-slider
    sdjl
        35
    sdjl  
    OP
       2013-08-22 17:57:45 +08:00
    其实, 这里有一定的难度, 首先每张背景图片的尺寸是不一样的, 设计上要求每张图片都能竟可能的在不同尺寸上满屏显示, 也就是不同的设备和浏览器尺寸都要满屏显示, 同时还不能让图片变形

    且此功能要兼容ie6, 因此使用了我们的bgimage的fx, 大概代码如下

    <div>
    <img src='a.jpg' fx='bgimage'/>
    <img src='b.jpg' fx='bgimage'/>
    <img src='b.jpg' fx='bgimage'/>
    </div>

    另外, 这里要求背景图片实现hover按钮时切换, 因此又使用了一个fx: cycle

    代码大概变成这样:
    <div fx="cycle">
    <img src='a.jpg' fx='bgimage'/>
    <img src='b.jpg' fx='bgimage'/>
    <img src='b.jpg' fx='bgimage'/>
    </div>

    这是一个成本问题, 如果以上两个功能自己重写, 工作量就会很大, 特别是要兼容ie6的话


    大家反应的切换时卡和闪的问题, 暂时没有找到确切的原因, 猜测可能主要是因为网速较慢, 导致图片还没有加载好就开始切换导致看到了空白

    我们先通过下面几个小办法优化一下:


    1 添加默认的背景平铺, 弱化"闪"的感觉
    2 给第一张图片添加先隐藏, load完成后再fadeIn
    3 适当延长第一次图片切换的时间, 给出更多时间来预加载图片
    4 延迟"项目"图片的加载
    5 适当压缩图片质量, 减少图片文件
    sdjl
        36
    sdjl  
    OP
       2013-08-22 19:00:10 +08:00
    @skyahead
    @eary
    @GinoSin
    @spark

    之前有一个bgimage fx的功能, 就是在改变浏览器尺寸的时候调整背景图的显示, 保持完整图片显示, 这个功能估计比较占用cpu资源, 我已经去掉了, 请帮忙看看是不是有好转?
    jjplay
        37
    jjplay  
       2013-08-22 20:08:05 +08:00
    @sdjl 看着不错,一开始以为 都是纯AJAX的额,仔细一看都是页面里的,我两年前做过一个 http://www.egrid2000.com/,根据不同的localtion.hash ajax切换,我看着也以为你是呢,呵呵
    sdjl
        38
    sdjl  
    OP
       2013-08-23 10:10:07 +08:00
    @jjplay 额 , 没有必要做ajax, 文字本身没有多少, 主要是图片比较占用带宽, ajax就增加复杂度了, 做好图片仅需要的时候显示就可以了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5689 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:32 · PVG 11:32 · LAX 19:32 · JFK 22:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.