<option id="uausy"></option>
  • <li id="uausy"></li>
  • array(23) {
      ["id"] => string(2) "96"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(1) "0"
      ["name"] => string(6) "服務"
      ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "service"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_dingzhi.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
      ["son"] => array(9) {
        [0] => array(22) {
          ["id"] => string(3) "187"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "小程序開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能,提前布局微信新生態,搶占第一波紅利"
          ["pdir"] => string(0) ""
          ["dir"] => string(6) "wechat"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
            ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
            ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發,專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_xcx.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "0"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "1"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [1] => array(22) {
          ["id"] => string(3) "199"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "APP開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "APP"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
            ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_app.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "1"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [2] => array(22) {
          ["id"] => string(3) "244"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "快抖霸屏"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "kuaidou"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商!"
            ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
            ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(20) "show_page_douyin.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "2"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(27) "需要短視頻推廣排名"
          ["modelname"] => NULL
        }
        [3] => array(22) {
          ["id"] => string(3) "207"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(14) "AI智能名片"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(2) "ai"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
            ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
            ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(16) "show_page_ai.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "3"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [4] => array(22) {
          ["id"] => string(3) "201"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "版權登記"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "copyright"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_copyright.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "4"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [5] => array(22) {
          ["id"] => string(3) "203"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "商標注冊"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "trademark"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
            ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
            ["meta_description"] => string(182) "「源知果」西安提供代理版權登記,代理商標注冊,代理專利申請,代理企業貫標,代理高新技術企業認定的服務;咨詢電話:13325455411。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_trademark.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "5"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [6] => array(22) {
          ["id"] => string(3) "205"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "網站建設"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
          ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "website"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
            ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
            ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(21) "show_page_website.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "6"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [7] => array(22) {
          ["id"] => string(3) "208"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "2"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "云服務平臺"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(0) ""
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(0)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(0)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(0) ""
            ["formid"] => string(0) ""
            ["url"] => string(21) "http://www.qulvkj.com"
            ["target"] => string(6) "_blank"
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "7"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [8] => array(22) {
          ["id"] => string(3) "202"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "SEO優化"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "seo"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
            ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
            ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_seo.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "8"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
      }
    }
    
    				
    當前位置: 首頁 > 售后 > 藝源智庫
    內部培訓資料!幫你從零開始掌握交互設計的學習筆記
    時間:2019-04-04 17:49:34
    文章發布:李陽
    原創作者:未知
    來源:優設

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    近期兩個月給公司的伙伴們做交互設計的分享,這是第一期分享的內容。在這次分享中,我認真梳理了交互設計師掌握和精通這門技藝的方法。我認為,如果想成為拔尖的設計師,只有這條路可走。

    什么是交互設計

    用戶界面有兩部分的設計:交互設計和視覺設計。在下圖中,左邊和右邊分別是微信的交互設計和視覺設計。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    交互設計 vs. 視覺設計

    交互設計的產出物是可交互的低保真原型,設計內容包括:

        ■ 信息架構;

        ■ 頁面布局;

        ■ 流程跳轉。

    一、信息架構

    信息架構,是為了讓用戶在使用APP、軟件、網頁的時候,能夠快速找到自己需要的信息、資料、功能,并且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映信息(功能)的重要程度和關系。

    信息架構的組成部分:

    1. 組織系統:

    關注如何組織信息。比如小說,按篇幅,可以分為短篇、中篇、長篇;按年代,可以分為:古代、近代、現代、當代;按題材,可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適,需要設計者的判斷和權衡。比如當當網的商品組織方式:

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    組織系統

    2. 導航系統

    協助用戶了解他在哪個位置,以及可以到何處去。比如微信的功能導航:

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    微信功能導航

    豆瓣的功能導航:

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    豆瓣功能導航

    3. 搜索系統

    關注用戶如何搜索信息。比如淘寶的搜索:

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    搜索系統

    4. 標簽系統

    關注如何表示信息。我們可以把標簽系統理解為如何為信息和它的組織方式命名。比如我們剛才提到的小說按題材,可以分為武俠、推理、歷史、言情等等,其中的武俠、推理這些就是信息的標簽。

    一些大型網站,比如淘寶、當當、京東等,設有專門的信息架構師角色。而大部分的APP、應用軟件中,信息架構由交互設計師設計。

    二、頁面布局

    頁面布局的工作,就是確定每個頁面有哪些元素,它們位置、順序、分組,要突出什么元素,弱化或隱藏什么元素。、

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    頁面布局

    在設計布局時,有一個要特別注意的事情,就是盡可能減少父頁(所有布局抽象出來的模板)。比如說360安全路由的APP,它的父頁如下,所有頁面布局,都是由這四個模板變化而來。這樣的軟件,用戶在使用時,會感覺統一、易學。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    360安全路由

    三、流程跳轉

    設計頁面之間的跳轉邏輯。通過鏈接、按鈕還是手勢;單擊還是雙擊;上劃還是下劃……我們在做可交互的原型時,要盡可能貼近軟件的效果。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    流程跳轉

    交互和視覺的分工

    交互設計師在設計頁面布局時,為了突出主次,會設計字體大小、間距、顏色等內容,但這不是最終效果。最終的字體、顏色、圖片、圖標、大小、間距等,由視覺設計師確定。

    交互設計師在設計流程跳轉時,會設計過場動畫,但這同樣不是最終效果。最終效果由視覺設計師(或動畫設計師)確定。

    區分交互和視覺有一種快速判斷法,那就是web工程師平時寫的css里的屬性和參數,都屬于視覺設計的范疇。所以很多公司會多招幾個UI設計師,他們不僅僅負責視覺設計,還負責輸出css樣式表。

    交互和視覺對人的要求

    交互設計和視覺設計對人的要求不同,并且往往越往深入做,這兩者所需的性格、背景和思維方式差別越大??梢院唵蔚乩斫?,交互設計是靠理性和邏輯驅動,而視覺設計是靠感性驅動。這也是為什么目前的交互設計師中理工科院的學生占了很大比例。業界也有很多開發工程師轉做交互設計的成功案例。所以做開發,學交互設計有優勢。

    交互和視覺高度交叉

    我上面說,交互設計和視覺設計的分工,也說它們對人的要求不同。這可能會讓大家誤以為,這兩個角色的工作比較獨立,各自負責各自的內容。交互不用管視覺,視覺不用管交互。

    但這是不對的。交互和視覺,是高度交叉的兩個領域,無法簡單的分隔。

    首先,交互設計師一定要有很好的視覺設計的感覺,因為一個頁面布局的好壞,會直接影響視覺的發揮。如果交互設計師導入一個沒主次,結構很糟糕的設計給視覺設計師,他只有兩個選擇,一、降低自己的水平,隨便做一個;二、自己動手,重新設計一個。

    其次,交互設計會影響視覺設計,視覺設計也有可能反過來,讓交互設計做修改。舉個例子,我們近期正在做的一個功能。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    早期的交互設計里沒有列表選擇功能。后來在視覺設計過程中發現,我們的窗口大小,如果要保證視頻旁邊不出現黑邊,可能會留很大得空隙,如果布局滿了,又會導致視頻出現黑邊。一種方式,是把底下的點贊、分享、評論移上來,放到右邊,但這樣的排版怎么也不會滿意。況且我們這個頁面核心的目的,是讓用戶看視頻。后來我們想了一下,增加了選集的功能,雖然這樣增加了開發工作量,但是對用戶來說,在這頁面可以直接導航到其它視頻,使用體驗更好,也解決了我們看視頻黑邊的問題。

    說這些想要表達的是,我們要時刻注意,自己是在同視覺設計師配合完成一個作品。我們設計的好壞,會影響他的工作。所以在介入真實項目前,我們要通過大量的學習+練習,達到準設計師水平。

    如何學習交互設計

    1. 看

    交互設計師需要有好的視覺設計的感覺,需要有基本的審美能力。如何提升審美能力?只有一種方法,看。

    我們要看大量優秀的設計作品?,F在有很多平臺可以很容易的找到世界上高端的設計師們設計的東西。比如behance、pinterest、FWA、dribbble等等……如果嫌國外的訪問太慢,也可以選擇國內的,比如花瓣。

    不要只看軟件界面,也看看其它領域的設計作品,好的產品、好的建筑、好的電影海報、好的攝影作品、好的藝術作品??吹较矚g的,把它們收集起來。

    看了后,該怎么判斷自己的審美能力有提升呢?

    隔幾個月去看看自己前幾個月喜歡的東西,當時覺得不錯,現在是不是覺得丑的掉渣?如果是的話,審美水平就在進步。

    還有一種辦法,把自己平時喜歡的、會分享的設計,同設計領域的人溝通,聽聽他們的意見。一個專業的設計師,不會只說,這個好,那個不好,他們說為什么好,為什么不好,比如「這個界面主次不夠突出,重點元素沒有強調出來」、「沒有引導用戶的視線」等等等等……

    2. 用

    我們在dribble、在花瓣,看的都是單個頁面。交互設計不只是設計一個個頁面,它還得把頁面串起來。所以看單個頁面還不行,我們要用、要體驗實際的產品,看看別人是怎么把一個個頁面組合成產品,頁面和頁面間的過場是怎樣的。

    怎么用呢?很簡單,我們每個人都有手機或pad。去下載優秀的APP,每個APP花20分鐘,把所有頁面、所有功能跑一遍。優秀的APP來源,可以是應用市場每個分類下的Top20,也可以來自一些優秀的組織、用戶推薦,如美應用、如知乎上的APP推薦等。

    我還有一個很誠懇的建議。如果有條件的話,買個MAC。為什么設計師喜歡用MAC?我們看幾張對比圖。

    PC和MAC上的QQ。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    PC和MAC上的應用市場。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    PC上的「精美」PPT模板,和MAC上的keynote模板。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    MAC的軟件比PC的軟件優雅太多,完全不在一個level。如果我們每天看的、用的都是好的產品,我們的審美能力自然會提升,對什么是好設計,什么是壞設計會更敏銳,更有感覺。

    3. 想

    認知科學研究發現:

    世界上好的象棋選手之間的差距,其實并不是他們思考能力的差異,或者是否能走出一招妙棋,而是他們熟悉的棋譜的多寡。

    做交互設計也是這樣,決定交互設計師的設計水平,是在做設計時,設計師能夠想起多少個相似的的設計,并借鑒、組合、改進它們,成為自己的設計。

    我們看了那么多優秀的設計,我們用了那么多優秀的產品,怎么樣才能在需要的時候記起它們呢?認知科學給出的答案很簡單,去想,去思考。

    一樣東西進入我們的大腦,如果我們沒有思考過,大腦會認為這個東西沒用,就丟掉它,不存下來。但如果我們仔細思考過它,大腦就會自己做個判斷,認為以后有可能要再度想起它,就把它存下來。

    所以不只要看,要用,還要想。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    比如我們看到這個頁面,要想:

    1. 信息架構是怎樣的?有沒有層級,有沒有邏輯順序?能不能反映它們的重要程度和關系?

    2. 頁面布局是怎樣的?它們位置、順序是怎樣的?它是怎么分塊的?它是怎么突出主要任務的?

    3. 有沒有其它設計亮點,比如好的隱喻,比如視覺怎么營造氛圍。

    把所有思考結果記錄下來。記得多了,形成自己的觀點后寫成文章,同其他人分享。

    4. 做

    一開始模仿,在這個過程中,學習工具的使用,把它用熟。

    為什么要先把工具用熟呢?道理很簡單,如果工具還不熟悉,大腦會把主要精力都耗費在工具的使用上,根本騰不出空間來思考設計的事。

    當工具使用沒有任何問題后,做真實的產品設計。

    我們可以直接在項目中實踐,但大部分人應該沒這個條件,那怎么做?

    重新設計現有的產品。比如我們可以重新設計微信,重新設計簡書;我們覺得某個軟件設計的不夠好,重新設計它。通過這種訓練方式,提升設計技能,達到準設計師的水平。

    那么,一個產品(或功能)的設計流程,是怎樣的呢?

    1. 明確使用場景

    我們經??吹揭粋€被分解后的功能指標項如下:

    我要一個遠程控制的功能。老師可以控制某個學生的電腦。

    如果按照這個需求做的話,在產品首頁加一個遠程控制的按鈕,點一下,老師可以選擇某個學生進行控制,這個功能就設計好了。

    但是實際上老師是怎么用的呢?我們和產品經理(或用戶)溝通,會發現老師使用這個功能的場景是:

    1. 老師查看屏幕預覽圖,覺得某個學生可能做的不錯,雙擊查看學生完整的屏幕。發現學生做的很好,就轉播給其他學生看,在這個過程中會協助學生微調作業。

    2. 學生有問題時,舉手請求老師協助,老師在講臺上協助解決問題,(并將這個協助過程廣播給其它同學)。

    這就是使用場景。場景非常非常重要。它決定了功能入口放在哪里比較合適,應該突出它,還是弱化它。它的前一步是什么,下一步是什么。

    只有明確了真實的使用場景,才能設計出用戶可用的產品。

    2. 收集素材

    去前面提到的設計網站,或是平時用的軟件商找同類設計來對比和分析,看看其他人是怎么設計的。比如遠程協助,可以看看QQ是怎么設計的。把它的整個流程跑幾遍,并且把每個過程截圖下來。借鑒它設計好的地方。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    QQ遠程協助

    3. 畫草圖

    有了想法以后,在紙上畫草圖。

    草圖里面,主要是把每個頁面都有哪些功能、元素,擺放順序定清楚。這個就是梳理我們設計思路的過程。

    這個過程一定要有。千萬不要一上來就做原型,那會花很多時間在對齊、排版等等瑣碎的事情上,我們也沒辦法一下子看到全貌,把每個頁面都想清楚了,頁面流程怎么跳轉都想好了,再搬到Axure上。

    4. 畫低保真原型

    把草圖搬到Axure上。這個過程還會調整,修改。

    5. 可用性測試,調整設計

    做完動態的、可交互的原型后,找三個用戶試用下(不一定要真實的用戶,另外,不用太多用戶,三個用戶就已經能夠發現70%關鍵問題),觀察他們在使用的時候會碰到什么問題,找出關鍵的問題,進行調整。

    這個階段完成后,就可以提交開發了。

    6. 補充細節設計

    有一些很細節的流程,我們沒辦法在一個交互稿里面完全體現,比如頁面內容為空時,怎么辦;數據加載出錯時,怎么辦。這個時候用文檔來補充這些分支流程。我們就像寫開發文檔一樣,把整個軟件的所有分支流程、異常流程都過一遍,記下來,然后提交開發。文檔形式不重要,只要能傳遞思考結果就行。

    以上只是一個大概的流程,在實際操做的時候,還會碰到很多問題。有一些東西我會在后面分享的時候再細講,還有一些東西,可能就需要大家實際動手,自己去摸索和沉淀。

    總結

    看、用、想、做。

    內部培訓資料!幫你從零開始掌握交互設計的學習筆記-藝源科技

    我想說的是,我們掌握一個東西,要下很大的功夫,沒有捷徑可走。那些想要走捷徑的人,往往到后面會發現,繞了一大圈,卻什么也沒得到。只有那些腳踏實地一步步前行的人,才有機會走到自己想要到達的地方。

    小程序開發
    標簽: 交互設計 用戶體驗 經驗分享 設計學習資料 設計筆記
    *版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯系我們刪除!
    為您推薦
    最新文章
    掃碼加他,免費獲取方案
    久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区
    <option id="uausy"></option>
  • <li id="uausy"></li>