你们喜欢那种风格? — Thiece统计数据

在时长7天的调查统计当中,Thiece很荣幸的拿到了一些统计数据,这会影响到Thiece以后的设计风格,首先还是感谢你们。

 

以下的整理后的数据统计:

1、在统计的人员当中计算机系统调查情况:

 

2、统计人员对先系统UI的喜欢程度调查

 

3、一个比较混乱的对WIN8风的博客喜爱统计调查

 

 

感谢金数据提供的调查方式,感谢对Thiece提供调查途径的QQ群(就不列出了),感谢对Thiece调查提供资料的人群(谢谢你们)

 

关于更多Thiece对设计的理解,请关注Thiece上篇文章从 设计来看日本 – 日本设计七个原则

 

 

改版在即……

从设计来看日本 – 日本设计七个原则

日本设计七个原则

FUKINSEI (不均整)

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

KANSO (简单)

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

KOKOU (朴素)

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

SHIZEN (自然)

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

YUGEN (幽玄)

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

DATSUZOKU (超凡脱俗)

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

SEIJAKU (静寂)

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

 

改版在即………

手绘网页中的那些事

 

 

手绘元素通常是用在纸上的,但是它们被越来越多的用在网站设计上面,这些速写元素令网站极具个性并能为访问者提供有趣的体验。手绘风格的引入,对于互联网应用作品起到了一个积极的影响。不同的主题和绘画风格,使其表现形式具有原创性,给设计带来了多元化,人性化的特征。

我们先来看一些网络中的案例:

节庆主题插画

GOOGLE每一次节日活动的banner设计都别出心裁,这很大程度要归功于应景且独特的的手绘风格作品

QQ浏览器中的闪屏设计,另一种视角展现节日主题。

网页中的插图

韩国保险类网站,五张插图使不同的保险内容一目了然。

韩国智能生活网站首页,信息量大的首页使用手绘素材比起真实素材来说更容易统一风格。

电商的品牌延伸

韩国电商网站,结合标志把卡通形象场景化,运用在网页每个类目中,增强品牌识别性和趣味性。

虚拟服务电商网站中的手绘应用

跟随网络世界蓬勃发展起来的是虚拟产业,将我们的数字化生活变得方便快捷。设计来源于生活,QQ网购充值中心主营虚拟服务业务,如话费,网游,保险,彩票等,常规的设计受到素材的限制,局限性很大。如何传播品牌形象,令消费者轻松愉悦的体验虚拟服务,这就需要我们的设计更加个性化,将情感因素溶入视觉形象中,借助虚拟形象来作为充值中心的情感载体,宣传和强化卡通形象,不管是大众传播、人际传播,还是组织传播,都可以互相渗透,综合运用。

生动化传播—卡通形象

生动化传播的要点在于形象生动、轻松互动,它能拉近卡通形象与受众间的距离,全方位带动受众的视觉和思考。卡通形象传播诉求的重点是引起形象联想,既以外在形象标准为核心,又有着内在本质内容。一套以卡通形象为核心的系统,能增强品牌传播效果。

充值小人胸口的“充”字为标识性的特点,根据不同的主题搭配表情和道具

平台tips中的运用,增加一些趣味性

 

运营活动tips中的运用,虚拟形象组件化,节省了创作步骤提高了工作效率。

营活动中的运用,如节日、卡通角色家庭系列、情景主题、flash小游戏等等。

 

事件化传播—节庆插图

卡通形象的事件化传播是围绕卡通形象利用具有新闻价值以及社会影响的人物或事件,吸引受众关注。有利于培养卡通形象爱好者对该形象的忠诚度。我们以节日主题为创作了一系列的插图,对节日的美好祝福和情感表达,让用户自然而然的产生亲近感,激发共鸣。

充值中心首页的广告位、登录框以及每日精选中的运用

故事化传播—四格漫画

这不是一个故事的时代,而是一个讲述与表达的时代。多格漫画是现在网络中最流行的一种宣传手段,画面分格来完成一个小故事或一个创意点子的表现形式对于品牌的建立起到很好的带入作用。画面不需很复杂,角色也不要太多,对白精简,让人容易轻松阅读,强调叙事,可以吸引用户连续的关注。

在互联网高速发展的今天,网络文化也越来越看重自我个性和情感的表达,这与插画的内在特质不谋而合,最终促进网页在表现形式上的丰富与更新。

【AJAX】让你的网站伪多进程加载

AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,

而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

不懂的传送门

 

也许上面的“专业”的解释各位会有些摸不着头脑,那下面的例子我相信各位看过之后便会顿悟。

在我们平常打开网页时我们是需要执行下面的操作的:

点击链接->获得链接的URL并且加载源代码->清空当前页面DOM(也就是当前的页面)->分析下载的源代码->显示在屏幕上

如果说原来的页面(加载前)和当前页面(加载后)的代码结构差不多的话,那样会浪费很多主机的资源

所以说骚年们,这时候我们就要用上AJAX神器了,AJAX的优势就在于,他可以仅向服务器发送并取回必需的数据,这样就节省了很大一部分的流量。

再举个例子吧,我们平常用到的微博,当我们点击“有几条新微博”的时候,你会发现整个页面并没有重新加载,但是新微博的内容却被添加到网页中,这就是AJAX技术的应用。

好的,我们切入正题,为了简化代码,这里使用了JQuery

 

WordPress版本 – 首页分页无刷新加载

首先引入JQuery,把下面的代码放置在header.php中(如果你的主题已经有引入,那么可以跳过这一步)

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js”></script>

下面提供两种方法,第一种相对来说比较麻烦,不过效率会比第二种的高,懒得折腾的骚年你可以移步第二种

第一种方法需要各位了解自己主题的代码结构

这种方法需要我们把index.php分成两个文件,一个是框架文件,一个是index_list.php,就是AJAX请求所加载的页面。

在主题index.php里面找到类似于

<div id=”content”>…</div>

这样的部分,因为主题的代码不同,所以可能会有偏差

将这里面的代码全部复制下来(也就是<div id=”content”>和</div>之间的部分),把这些代码写到index_list.php里面,index_list.php保存在主题目录下

以我现在用的主题为例,index_list.php里面的代码是

        <?php if ( have_posts() ) : ?>
            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( ‘content’, get_post_format() ); ?>
            <?php endwhile; ?>
            <?php twentytwelve_content_nav( ‘nav-below’ ); ?>
        <?php else : ?>
            <article id=”post-0″ class=”post no-results not-found”>
            <?php if ( current_user_can( ‘edit_posts’ ) ) :
                // Show a different message to a logged-in user who can add posts.
            ?>
                <header class=”entry-header”>
                    <h1 class=”entry-title”><?php _e( ‘No posts to display’, ‘twentytwelve’ ); ?></h1>
                </header>
                <div class=”entry-content”>
                    <p><?php printf( __( ‘Ready to publish your first post? <a href=”%s”>Get started here</a>.’, ‘twentytwelve’ ), admin_url( ‘post-new.php’ ) ); ?></p>
                </div><!– .entry-content –>
            <?php else :
                // Show the default message to everyone else.
            ?>
                <header class=”entry-header”>
                    <h1 class=”entry-title”><?php _e( ‘Nothing Found’, ‘twentytwelve’ ); ?></h1>
                </header>
                <div class=”entry-content”>
                    <p><?php _e( ‘Apologies, but no results were found. Perhaps searching will help find a related post.’, ‘twentytwelve’ ); ?></p>
                    <?php get_search_form(); ?>
                </div><!– .entry-content –>
            <?php endif; // end current_user_can() check ?>
            </article><!– #post-0 –>
        <?php endif; // end have_posts() check ?>

之后把原来在index.php里面这段代码用”<!–“和”–>”注释,再在<div id=”content”>和</div>之间加入这段代码

1
<?php include_once TEMPLATEPATH.’/index_list.php’; ?>

现在刷新一下网站首页,看一下文章内容有没有正常显示,如果没有正常显示请检查一下代码。

如果网站内容正常显示了,我们执行下一个步骤

将下面代码保存为index_ajax_navi.js,放在主题目录中

var navi=’.page_navi’; //这是主题分页的容器
var navi_a=’.page_navi a’; //这是主题分页的链接
var content=’#content’;//这是主题文章内容的容器
$(document).ready(function index_ajax_navi (){
    $(navi_a).click(function() {
        var z = $(this).attr(“href”);
        $.ajax({
            url: z,
            type:”POST”,
            data:”action=index_ajax_navi”,
            beforeSend:function()
            {
                document.body.style.cursor = ‘wait’;
                var C=0.7;
                $(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
                $(navi).html(‘<a>载入中…</a>’);
            },
            error: function(request)
            {
                alert(request.responseText);
            },
            success: function (data)
            {
                $(content).html(data);
                document.body.style.cursor = ‘auto’;
                var C=1;
                $(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
                //$body.animate({ scrollTop: ‘0px’}, 1000);
                index_ajax_navi();//翻页后DOM变化了,需要重新绑定函数
                //$body.animate( { scrollTop: $(content).offset().top – 150}, 1000);
                //$body.animate({ scrollTop: ‘0px’}, 1000);
                jQuery(‘html, body’).animate({scrollTop:$(content).offset().top – 100}, ‘slow’);
            }
        });
        return false;
        });
})

这段代码里面我们需要根据自己的主题来修改,至于要怎么修改?我觉得我应该不用多说了,右键审查元素即可。

之后在主题的footer.php引用

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/index_ajax_navi.js”></script>

最后一步,把下面的代码扔到主题functions.php里面就大功搞成思密达

function index_ajax_navi(){
    if( isset($_POST[‘action’])&& $_POST[‘action’] == ‘index_ajax_navi’){
    include_once TEMPLATEPATH.’/index_list.php’;  //注意修改为你自己的文件的位置
        die();
    }else{
        return;
    }
}
add_action(‘template_redirect’, ‘index_ajax_navi’);

 

嘛,骚年们,注意了,这里是分割线

WP,EM,TE通用版本

下面给出第二种方法,只有一段JS,还是需要在网页中引入JQuery

1
<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js”></script>

之后把下面的代码保存为index_ajax_navi.js

jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(‘html’) : $(‘body’)) : $(‘html,body’);
$(‘#pagenavi a’).live(‘click’,
    function(e) {
        urlb=$(this).attr(“href”);
        e.preventDefault();
        $.ajax({
            type: “GET”,
            url: $(this).attr(‘href’),
            beforeSend: function() {
                document.body.style.cursor = ‘wait’;
                var C=0.7;
                $(‘#ajax_list’).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
                $(‘#pagenavi’).html(‘<div>AJAXING , PLEASE HOLD ON …</div>’);
            },
            error: function(request)
            {
                alert(request.responseText);
            },
            dataType: “html”,
            success: function(out) {
                result = $(out).find(‘#ajax_list’);
                $(‘#content’).html(result);
                window.history.pushState(”, ”, urlb);
                var C=1;
                $(‘#ajax_list’).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
                document.body.style.cursor = ‘auto’;
                $body.animate({scrollTop: $(‘#ajax_list’).offset().top},’slow’);
            },
        })
    });
)}

上面的代码我们需要小小修改一下来适应自己的主题,之后在footer.php引入即可

#pagenavi改成自己主题的分页导航容器,也就是类似于<div id=”pagenavi”>…</div>这样的代码

#ajax_list改成我们异步加载的内容的容器

#content改成异步加载内容的父级

如果说还是有点抽象的话,我给个简单的例子吧

<html>
….上面的代码略….
<div id=”content”>
<div id=”ajax_list”>
里面是文章内容
</div>
<div id=”pagenavi”>这是分页导航</div>
</div>
….下面的代码略….
</html>

 

来自:西德欧

浏览器的想象力

多问“Why?”可以增加了解。多问 “Why not?”可能带来突破。

浏览器的诞生为的是将世界互联,于是需要有通用标准。所以有史以来,所有性本善的人,尤其是web前端开发,都极度厌恶不同浏览器之间的显示差异,一堆无奈花在兼容上。

很显然,消灭差异,世界才是美好的!

 

但人们没有意识到,另一件我们习以为常的事,其实正是在制造差异,极大的差异:同一篇新闻网页,在手机端,多余的区域干脆全都没有了,只剩新闻主体内容了。

由于这种差异制造本身契合了手机和PC的极大差异,这是基于用户需求的创新。

与其说UC开创了手机浏览器,不如说这是另一种网页数据的显示模式。这里所谓的显示模式,指相同的数据模型M,不同的控制处理R和视图显示V。

那么这里就产生了一个可能从来没有人想过的东西:为什么PC浏览器,对同一个网页,就不可以有更多的显示模式?例如做类似乃至更进一步的优化?

1、比如一个视频网页,浏览器将flash窗口之外的多余信息全部干掉,然后取而代之以自家的功能模块,类似影评、电视剧列表(可参看百度视频浏览器、风行播放器),再美名其曰:视频模式、影评模式。

2、比如一个新闻网页,浏览器将主题内容之外的内容全部干掉,取而代之以自家的边栏推荐。再美名其曰:清爽模式。

(这看上去是反互联网精神的,因为,它可能一举颠覆掉了整个视频市场、成为最大的媒体平台,掀起滔天大浪,引发无尽的口水和反弹……诸如添加一个黑名单啊,将这些大网站的页面优化掉,当然啦啦,还是要提供正常模式,尊重用户的选择权啦啦……跟当年的杀毒行业一样,很多人疯掉了……)

搜索中立、浏览器中立,这或许只是一定阶段的理想,所有的软件都是为了信息到达用户而生,任何一个必经的环节,都可能存在巨大的变化。信息在到达用户之前,必然要经过搜索或推荐的传送门跳转,还要经过浏览器这种显示容器来解析,既然可以被搜索截流,就一定可能被浏览器截流!

Web不死,得浏览器者,绝对可得天下!(仅指PC端)