ame->低保真Prototyple->Mockup->高保真Prototyple,這樣的流程是對的嗎?" />   

杏吧app下载,关婷娜被揉胸视频直播,杏吧之春暖花开有你

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) "定制開發(fā)-APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_keywords"] => string(75) "APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["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) "小程序開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場景核心功能,提前布局微信新生態(tài),搶占第一波紅利"
      ["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) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發(fā)-藝源科技小程序開發(fā)"
        ["meta_keywords"] => string(103) "小程序開發(fā),商城小程序開發(fā),門店小程序開發(fā),微圈小程序開發(fā),餐飲小程序開發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發(fā),專業(yè)團隊,一對一服務,助企業(yè)快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數(shù)據(jù)架構,系統(tǒng)穩(wěn)定安全。"
        ["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開發(fā)"
      ["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開發(fā)_app定制開發(fā)_app制作開發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發(fā),app定制開發(fā)公司,app制作開發(fā)公司"
        ["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) "藝源智能云推廣系統(tǒng)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智能名片為企業(yè)提供名片小程序,智能名片,企業(yè)名片,小程序名片,電子名片,二維碼名片等相關的服務。"
        ["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) "「源知果」西安提供代理版權登記,代理商標注冊,代理專利申請,代理企業(yè)貫標,代理高新技術企業(yè)認定的服務;咨詢電話: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) "網(wǎng)站建設"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款"
      ["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) "西安商城網(wǎng)站建設_政府網(wǎng)站建設_學校網(wǎng)站建設就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設,西安網(wǎng)絡公司,西安網(wǎng)頁設計,商城網(wǎng)站建設,政府網(wǎng)站建設,學校網(wǎng)站建設"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設,政府網(wǎng)站建設,學校網(wǎng)站建設的網(wǎng)絡公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經(jīng)驗,為您提供一條龍的互聯(lián)網(wǎng)應用解決方案。"
        ["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優(yōu)化"
      ["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優(yōu)化_西安網(wǎng)站優(yōu)化_關鍵詞排名優(yōu)化】-SEO優(yōu)化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優(yōu)化,西安SEO優(yōu)化公司,西安網(wǎng)站優(yōu)化,西安網(wǎng)站優(yōu)化公司"
        ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務,針對不同行業(yè)、網(wǎng)站情況給出不同策略、報價和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
    }
  }
}
				
當前位置: 首頁 > 售后 > 藝源智庫
超贊干貨!一個完整的UI設計流程是怎樣的?
時間:2019-05-30 10:00:17
文章發(fā)布:李陽
原創(chuàng)作者:未知
來源:互聯(lián)網(wǎng)

收到一封 Mail,其中提到幾個關于設計流程和 Prototype 的問題。UI設計流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple,這樣的流程是對的嗎?今天來聊聊一個完整的 UI 設計流程應該是怎樣的,收干貨!

根據(jù)上過課的學員響應、以及自身經(jīng)驗,目前業(yè)界的情況大多是 UI 設計師收到「開工啦」的通知,然后就從 Wireframe 開始下手。用戶怎么操作、有哪些功能、用戶和客戶的需求是什么往往靠 PM 簡單口述。

Wireframe 為什么會長這樣?在 Wireframe 之前還有哪些事要做?

全部都靠通靈。

所以執(zhí)行項目期間都在改來改去,撐到最后一天總是可以結案就解脫了嘛,再開始下個改來改去的輪回。


開發(fā)流程

基本上我自己在開發(fā)產(chǎn)品的流程大致上不會脫離這張圖太遠。

超贊干貨!一個完整的UI設計流程是怎樣的?-藝源科技

  1. 1、User Story

  2. 2、Functional Map

  3. 3、Flow Chart

  4. 4、UI Flow

  5. 5、Wireframe

  6. 6、Mockup

  7. 7、Prototype

使用者要什么? > 從需求中整理出功能 > 用戶怎么操作這些功能? > 操作的過程需要哪些頁面? > 頁面要放什么內(nèi)容/組件?怎么被操作? > 使用者看到的頁面長什么樣子?

各家有各家的作法,沒有標準或正確一定要這樣做的流程,但我在做自己的玩具時都會這樣干。

有 UX 團隊的大公司會把上述流程拆的更細,還會做使用者研究之類;一人 UI/UX 通包的小型團隊…這 7 項是一定要產(chǎn)出的文件,依個人想偷懶的慘痛經(jīng)驗,再刪除精簡化就會在執(zhí)行項目的過程中漏東漏西,之后補洞反而花更多時間和心力。


1. User Story

功能怎么來的?從「使用者要什么」或「客戶預期使用者想要什么」開始。
依用戶的身份不同,想要的功能也會不同,完成的任務不一樣嘛。

比如「Blog」:

我是讀者,我要看到這位作者寫的所有文章。
我是作者,我要撰寫并發(fā)布文章。
我是平臺提供商,我要看到所有會員身份和繳費狀態(tài)。

這三種身份對「Blog」這項產(chǎn)品的需求和預期完全不同。


2. Functional Map

寫了 User Story,才會知道有哪些大小功能要做。針對不同使用者的需求,從故事中挑出功能。使用者的身份不同往往影響他們能使用的功能,整理歸納出共通和差異處。


3. Flow Chart

當開發(fā)者知道使用者想要什么、也有了功能,才有辦法思考「用戶怎么操作功能完成他的任務或達到目的」。

UI 設計師常說:「配合用戶的習慣與行為來設計操作流程」。就是在這一階段規(guī)劃。如果跳過 Flow Chart,只要產(chǎn)品功能復雜起來,你家的 RD 就會抱著頭哀嚎了。


4. UI Flow

知道用戶會怎么操作一項功能時,才有辦法規(guī)劃操作動線。UI Flow 指的是頁面與頁面之間的操作流程,用戶想完成任務會經(jīng)過多少頁面之類。

有另一位讀者傳訊問道,為什么我之前的文章說不要用圖片版的 UI Flow、要用文字版的呢?

首先,這是雞生蛋蛋生雞的問題。如果這個項目從零開始,把 Flow Chart 規(guī)劃完后接著做 UI Flow,這時候哪來的圖片版可以串 Flow?連 Wireframe 都還沒開始畫哩!

第二,當你的產(chǎn)品頁面一多的時候…也不用太多,20頁,用圖片串出一個 UI Flow ,這個 Flow 圖表尺寸有多大張?誰有那個心力在一張大圖上用手掌工具來回移動看頁面走向?

第三,很多人做圖片版的 UI Flow 時,線條連接的是「頁面」和「頁面」,這時候你也只知道「喔~這一頁的下一頁會到這里」,但你完全不會知道為什么會到這一頁。要點哪里、或是發(fā)生什么事所以跑到這里來?猜猜看啊~

要靠猜猜看才會看懂的文件看它(寫它)干嘛?不要浪費時間啊。

文字版的 UI Flow 我拿來當「目錄」用,對照 Wireframe 的編號,找圖看細節(jié)的時候快。
圖片版的 UI Flow 我會用在「優(yōu)化」舊產(chǎn)品的操作時使用,連接線會從「組件到頁面」,而不是「頁面到頁面」,并在圖片和線條旁邊寫上文字說明,才會知道哪個步驟可以省略或修改得更易于使用。


5. Wireframe

有畫 Wireframe 不代表工程師就看得懂這要干嘛,光看臉皺成一團的表情你也不知道他是踢到腳指還是吃到酸梅。文字說明才是 Wireframe 的重點,包含觸發(fā)、回饋、狀態(tài)變化等等。

一開網(wǎng)頁就自動出現(xiàn)廣告、還是開啟網(wǎng)頁后等個3秒才出現(xiàn)廣告?
廣告出現(xiàn)10秒自動消失,還是要按(X)按鈕?
網(wǎng)頁停止30秒沒有操作要不要出現(xiàn)廣告?

工程師只會照你寫的去做、不會照你想的去做。工程師不是神也不是蛔蟲,他們是一般人,沒有他心通這種神力,溝通上肯定會有認知落差,所以話要講清楚,設計師的常識不等于工程師的知識。

Flow Chart、UI Flow、Wireframe 這三份文件寫到一半發(fā)現(xiàn)什么東西漏掉回頭補上是正?,F(xiàn)象,不可能一次到位。


6. Mockup

視覺稿…照 Grid 和 Guideline 做吧,之后還有切圖和標示文件要弄。

好處是切圖和標示文件都有外掛工具可以代勞,甚至設計師只要顧好原始檔、切圖和標示文件都用 Avocode 或 Zeplin 解決。

壞處是,如果不太知道技術限制,做出來的東西工程師不能用就算了,他們還白挨設計師的罵。

「為什么你做出來的東西和我畫的差了幾px?」

「拜托!RWD 不可能完全和你畫的一模一樣好不好?」

「是你能力不夠還是偷懶?我的圖畫得出來為什么你做不出來?」

「干…」


7. Prototype

那位讀者問另外問了關于 Prototype 的問題:

高保真Prototyple是在切圖給RD之后制作,那做出來的用意是在RD程序還沒完成前再次確定操作上有無任何問題嗎?

那高保真Prototyple就是跟成品長的一樣還可以操作啰??

做 Prototype 的目的通常是測試和驗證,不管是給使用者操作看看、觀察使用者操作狀況做使用者測試;還是工程師套完程序上線前先測看看有沒有蟲或哪邊爆炸了。所以它一定要可以被操作,不能被實際操作是要怎么測試?腦內(nèi)補完?

Prototype 要可以被操作!

Prototype 要可以被操作!

Prototype 要可以被操作!

不能被操作的都不是 Prototype。

Wireframe 可以做 Prototype,低保真原型。
Mockup 可以做 Prototype,高保真原型。
切圖叫工程師寫程序套版做一個,高保真原型。

我自己大多做完 Mockup 后才會出 Prototype 測試。
因為,Wireframe 做的低保真原型一般使用者看不懂也沒感覺,沒辦法做使用者測試 =_=

Wireframe 做的 Prototype 頂多內(nèi)部測試吧,但內(nèi)部測試常常不太準,工程師和設計師的思維和一般人不一樣,測一測重點常常歪掉…


補充說明

另一位讀者看了本文后若有所感,傳訊跟我討論了下。

今天也和老板談了是否要有 Functional Map 和 UI Flow 等等這些流程,讓我們在前面討論的時候就可以厘清,而不是在視覺稿才修改增減,他也直言我們沒有那么多時間無法照這樣流程,真的很無力…

沒有那么多時間無法照這樣流程?當然啊,因為要把時間留在后面改來改去嘛~~~~~

時間總是要花的,看是花在前期規(guī)劃還是后期補洞而已。說沒時間無法照流程的是根本沒流程可以照吧。

想逼走員工、降低團隊士氣,盡量亂改沒關系,反正大家都知道亂改的那個人連自己要什么都不知道只好胡亂張嘴下指令。

小程序開發(fā)
標簽: ui設計 用戶體驗 經(jīng)驗分享 設計流程
*版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯(lián)系我們刪除!
為您推薦
最新文章
掃碼加他,免費獲取方案