外包成功案例展示, 给设计世博会大楼的公司做的官网 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sdjl
V2EX    外包

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

  •  
  •   sdjl 2013-08-21 16:00:31 +08:00 2626 次点击
    这是一个创建于 4481 天前的主题其中的信息可能已经有所发展或是发生改变。
    客户网站: 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     Solana     2950 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 41ms UTC 14:00 PVG 22:00 LAX 06:00 JFK 09:00
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86