182021-10

如何把握好平面設(shè)計中的節(jié)奏感？

資深UI設(shè)計者

如何把握好平面設(shè)計中的節(jié)奏感？來看高手的分析！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：優(yōu)設(shè) 作者：美工美邦
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2706)

182021-10

什么是異步？

異步與同步是相反的

簡單來理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效率更高。

什么時候用異步編程

在前端編程中（甚至后端有時也是這樣），我們在處理一些簡短、快速的操作時，例如計算 1 + 1 的結(jié)果，往往在主線程中就可以完成。主線程作為一個線程，不能夠同時接受多方面的請求。所以，當(dāng)一個事件沒有結(jié)束時，界面將無法處理其他請求。

現(xiàn)在有一個按鈕，如果我們設(shè)置它的 onclick 事件為一個死循環(huán)，那么當(dāng)這個按鈕按下，整個網(wǎng)頁將失去響應(yīng)。

為了解決類似這種問題，JavaScript 中的異步操作函數(shù)往往通過回調(diào)函數(shù)來實現(xiàn)異步任務(wù)的結(jié)果處理。

回調(diào)函數(shù)

回調(diào)函數(shù)就是一個函數(shù)，它是在我們啟動一個異步任務(wù)的時候就告訴它：等你完成了這個任務(wù)之后要干什么。這樣一來主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了，他自己會善始善終。

例如：




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <title>回調(diào)</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button>點擊</button>
            

        

    

    

        

            

            

        

        

            
                <p></p>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var btn = document.querySelector('button');
            

        

    

    

        

            

            

        

        

            
                function fn1(){
            

        

    

    

        

            

            

        

        

            
                btn.onclick = function(){
            

        

    

    

        

            

            

        

        

            
                document.querySelector('p').innerHTML = '我出現(xiàn)了！'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                setTimeout(fn1,1000)
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

它的第一個參數(shù)是個回調(diào)函數(shù)，第二個參數(shù)是毫秒數(shù)，這個函數(shù)執(zhí)行之后會產(chǎn)生一個子線程，子線程會等待 1 秒，然后執(zhí)行回調(diào)函數(shù) "fn1"，在命令行輸出 "我出現(xiàn)了！"。

Promise 的使用

語法格式：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log("Run");
            

        

    

    

        

            

            

        

        

            
                });

resolve和reject是參數(shù)

再看這個例子：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                var a = 0;
            

        

    

    

        

            

            

        

        

            
                var b = 1;
            

        

    

    

        

            

            

        

        

            
                if (b == 0) reject("Divide zero");
            

        

    

    

        

            

            

        

        

            
                else resolve(a / b);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log("a / b = " + value);
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                }).finally(function () {
            

        

    

    

        

            

            

        

        

            
                console.log("End");
            

        

    

    

        

            

            

        

        

            
                });

這段打印結(jié)果為：

.then() .catch() 和 .finally() 三個方法

這三個方法的參數(shù)都是一個函數(shù)，

.then() 可以將參數(shù)中的函數(shù)添加到當(dāng)前 Promise 的正常執(zhí)行序列，

.catch() 則是設(shè)定 Promise 的異常處理序列，

.finally() 是在 Promise 執(zhí)行的最后一定會執(zhí)行的序列。 .then() 傳入的函數(shù)會按順序依次執(zhí)行，有任何異常都會直接跳到 catch 序列：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log(1111);
            

        

    

    

        

            

            

        

        

            
                resolve(2222);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                return 3333;
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                throw "An error";
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                });

打印結(jié)果為：

1111
2222
3333
An error

resolve() 中可以放置一個參數(shù)用于向下一個 then 傳遞一個值，then 中的函數(shù)也可以返回一個值傳遞給 then。但是，如果 then 中返回的是一個 Promise 對象，那么下一個 then 將相當(dāng)于對這個返回的 Promise 進行操作，這一點從剛才的計時器的例子中可以看出來。

reject() 參數(shù)中一般會傳遞一個異常給之后的 catch 函數(shù)用于處理異常。

但是請注意以下兩點：

resolve 和 reject 的作用域只有起始函數(shù)，不包括 then 以及其他序列；
resolve 和 reject 并不能夠使起始函數(shù)停止運行，別忘了 return。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2156)

182021-10

【舉栗說明】JavaScript作用域，一次性給你總結(jié)！

前端達人

本文重點

函數(shù)案例
函數(shù)作為參數(shù)使用
arguments
作用域：寫代碼要注意變量的在哪聲明和使用的問題
預(yù)解析：什么叫預(yù)解析, 什么東西發(fā)生了什么事

01 作用域:使用范圍

全局變量:

聲明的變量是使用var聲明的,那么這個變量就是全局變量,
全局變量可以在頁面的任何位置使用
除了函數(shù)以外,其他的任何位置定義的變量都是全局變量
如果頁面不關(guān)閉,那么就不會釋放,就會占空間,消耗內(nèi)存
全局作用域:全局變量的使用范圍

局部變量:

在函數(shù)內(nèi)部定義的變量,是局部變量,外面不能使用
局部作用域:局部變量的使用范圍

注意:

塊級作用域:一對大括號就可以看成是一塊,在這塊區(qū)域中定義的變量,只能在這個區(qū)域中使用,但是在js中在這個塊級作用域中定義的變量,外面也能使用;

說明:js沒有塊級作用域,只有函數(shù)除外

隱式全局變量:聲明的變量沒有var,就叫隱式全局變量

全局變量是不能被刪除的,隱式全局變量是可以被刪除的

定義變量使用var是不會被刪除的,沒有var是可以刪除的

function f1() {  number=1000;//是隱式全局變量 }f1();console.log(number);   var num1=10;  num2=20;  delete num1;//把num1刪除了  delete num2;//把num2刪除了  console.log(typeof num1);  console.log(num1+10);  console.log(typeof num2);  num=100; console.log(num);  function f1() {  var num=100;  num+=10; }f1();//這個函數(shù)結(jié)束之后 { var num=10;  console.log(num);//10 }console.log(num);  if(true){  var num=10; }console.log(num); for(var i=0;i<5;i++){  var number=20; }console.log(number);   var i=0;  while (i<5){  var num=100;  i++;  } console.log(num);  function f1() {  var num=10; }f1(); console.log(num);  var num=10; console.log(num);//10

作用域鏈

 var num=10;  function f1() {  var num=20;  function f2() {  var num=30;  function f3() {  var num=50;  console.log(num);  } f3();  } f2();  } f1();

03 函數(shù)案例

求2個數(shù)中的最大值

 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } console.log(getMax(10,20));  //console.log(getMax);//函數(shù)的代碼 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } var num1=10;  var num2=20;  //函數(shù)外面的num1和函數(shù)的形參num1不是同一個變量 var result=getMax(num1,num2);  console.log(result);  console.log(getMax);//函數(shù)的代碼

求3個數(shù)中的最大值

 function getThreeMax(x, y, z) {  return x > y ? (x > z ? x : z) : (y > z ? y : z);  } console.log(getThreeMax(10,2,24));

判斷一個數(shù)是否是素數(shù)(質(zhì)數(shù)),只能被1和自身整除，質(zhì)數(shù)是從2開始

用這個數(shù)字和這個數(shù)字前面的所有的數(shù)字整除一次(沒有1的,沒有自身的)

 function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //說明有一個數(shù)字整除了，就沒有必要向后繼續(xù)整除了， //此時就已經(jīng)驗證出不是質(zhì)數(shù) return false;  } } return true;  }//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno") var aa = isPrimeNumber(17);  if (aa) {  console.log("yes");  } else {  console.log("no");  }  function isPrimeNumber(num) {  for(var i=2;i<num;i++){  if(num%i==0){  //說明有一個數(shù)字整除了,就沒有必要向后繼續(xù)整除了,此時就已經(jīng)驗證出不是質(zhì)數(shù) return false;  } } return true;  } console.log(isPrimeNumber(8)?"是質(zhì)數(shù)":"不是質(zhì)數(shù)");   var result=isPrimeNumber(2);  if(result){  console.log("這個數(shù)字是質(zhì)數(shù)");  }else{  console.log("這個數(shù)字不是質(zhì)數(shù)");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88))

通過函數(shù)實現(xiàn)數(shù)組反轉(zhuǎn)

 function reverseArray(arr) {  for (var i = 0; i < arr.length / 2; i++) {  var temp = arr[i];  arr[i] = arr[arr.length - 1 - i];  arr[arr.length - 1 - i] = temp;  } return arr;  } console.log(reverseArray([1, 2, 3, 4, 5]));

通過函數(shù)實現(xiàn)冒泡排序

 function sortArray(arr) {  //控制比較的輪數(shù) for (var i = 0; i < arr.length - 1; i++) {  //控制每一輪的比較次數(shù) for (var j = 0; j < arr.length - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  var temp = arr[j];  arr[j] = arr[j + 1];  arr[j + 1] = temp;  }//end if }//end for }//end for return arr; } console.log(sortArray([0, 19, 34, 10, 100, 2]));

求一個數(shù)字的階乘

function getJieCheng(num) {  var result = 1;  for (var i = 1; i <= num; i++) {  result *= i;  } return result; }console.log(getJieCheng(5));//1*2*3*4*5

求斐波那契數(shù)列

 function getFib(num){  var num1=1;  var num2=1;  var num3=0;  for(var i=3;i<=nnum;i++){  sum=num1+num2;  num1=num2;  num2=sum;  } return sum;  } console.log(getFib(12))

02 函數(shù)作為參數(shù)使用

函數(shù)是有數(shù)據(jù)類型,數(shù)據(jù)類型:是function類型的

函數(shù)可以作為參數(shù)使用,如果一個函數(shù)作為參數(shù),那么我們說這個參數(shù)(函數(shù))可以叫回調(diào)函數(shù) 只要是看到一個函數(shù)作為參數(shù)使用了,那就是回調(diào)函數(shù)

function sayHi(fn) {   console.log("GOOD");  fn();//fn此時應(yīng)該是一個函數(shù)}function suSay() {  console.log("HELLO"); }sayHi(suSay); function f1(x,y) {  console.log(x+y); }f1(10,20); function f2(x,y) {  console.log(x+y); }f2("HLS","MISS"); function f3(x) {  console.log(x); }f3(true);

04 arguments

計算n個數(shù)字的和

定義一個函數(shù),如果不確定用戶是否傳入了參數(shù),或者說不知道用戶傳了幾個參數(shù),沒辦法計算,但是如果在函數(shù)中知道了參數(shù)的個數(shù),等于也知道了每個參數(shù)的值.

//定義function f1() {  //獲取的是函數(shù)在調(diào)用的時候,傳入了幾個參數(shù) //console.log(arguments.length);  //使用arguments對象可以獲取傳入的每個參數(shù)的值 console.log(arguments); } f1(10,20,30,40,100,200);//調(diào)用

 function f1() {  //arguments----->數(shù)組使用------偽數(shù)組--- var sum=0;  for(var i=0;i<arguments.length;i++){  sum+=arguments[i];  } return sum;  } console.log(f1(10,20,30));

05 預(yù)解析:提前解析代碼

預(yù)解析:就是在解析代碼之前,預(yù)解析做什么事?

把變量的聲明提前了----提前到當(dāng)前所在的作用域的最上面

函數(shù)的聲明也會被提前—提前到當(dāng)前所在的作用域的最上面

函數(shù)調(diào)用的時候, 把會函數(shù)的聲明提升到作用域的上面

函數(shù)的聲明提升到作用域

 f1();//調(diào)用  var num=20;//這個變量的聲明會提升到變量使用之前  function f1() {  console.log(num);  //var num=10;  } function f1() {  console.log("小蘇好猥瑣");  } f1();  function f1() {  console.log("小蘇沒有助教猥瑣");  } f1();

把變量的聲明提前

 var num;  console.log(num);  num=10;  function f1() {  console.log("哈哈,助教好猥瑣哦");  }   //f1();//報錯

注意：預(yù)解析中,變量的提升,只會在當(dāng)前的作用域中提升,提前到當(dāng)前的作用域的最上面

  function f1() {  console.log(num);//undefined  var num = 10;  } f1();   console.log(num);//報錯

函數(shù)中的變量只會提前到函數(shù)的作用域中的最前面,不會出去

預(yù)解析會分段(多對的script標(biāo)簽中函數(shù)重名,預(yù)解析的時候不會沖突)

 function f1() {  console.log(num);//undefined  var num=10; } f1(); console.log(num);// function f1() { console.log("哈哈"); }

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(1838)

182021-10

體驗設(shè)計構(gòu)建品牌價值-打造影響用戶心智的價值連接

seo達人

01.前言

總有一些人會讓你感覺格外親近，總有一些事會在不經(jīng)意間打動你，慢慢的深入人心，是什么讓你感覺親近、愉悅、甚至興奮？今天這篇文章主要從產(chǎn)品設(shè)計的視角分享一下深入人心的產(chǎn)品設(shè)計方法。

a

02.事勢之流相激使然

“世事的變化趨勢或態(tài)勢是各種因素、力量相互碰撞、激發(fā)的結(jié)果”。同樣想要讓你的產(chǎn)品深入人心，本質(zhì)是我們的產(chǎn)品要給用戶提供獨特的價值，而價值的產(chǎn)生可以理解為一個形象在用戶心智中的建立，這里的形象類似于品牌VI，但絕不止于視覺層面，其實可以由多個維度構(gòu)成。通過不同的維度影響用戶的使用體驗，最終形成產(chǎn)品的品牌價值。

我們可以把品牌價值理解為“人物個性”，美國心理協(xié)會(APA)將個性定義為“在各種場合、隨時間變化，能夠影響多種特征行為模式的個體的獨特心理特質(zhì)?！?/span>

產(chǎn)品的個性會影響用戶的感受、思考、處理以及最終的結(jié)果。例如，當(dāng)用戶挑選并投遞一個職位時，她希望聽你成熟的建議來引導(dǎo)她。將品牌與幾種典型的人物個性關(guān)聯(lián)起來，就能創(chuàng)造關(guān)聯(lián)性更強的故事，更容易使用戶投入。換言之：人與人更容易親近。如果你的品牌感覺像“人”，用戶就會更親近。

d

03.找到“人物個性” 明確品牌價值

定義“人物個性”，就是去思考如何面對用戶，如何以最好的姿態(tài)向用戶展示自己，首先要建立有效的價值體系。這里我們通過招聘業(yè)務(wù)的一個項目逐步講解一下。

我們知道下沉市場的招聘環(huán)境十分惡劣，存在各種虛假信息的問題。結(jié)合這個背景我們對藍領(lǐng)用戶的求職現(xiàn)狀進行了一系列詳細(xì)的調(diào)研，收集了用戶不同層級的需求（如下圖）。

我們可以發(fā)現(xiàn)用戶最基礎(chǔ)的需求只是要求職位信息的內(nèi)容真實，加分需求則是對職位品質(zhì)提出了期望，在保障職位信息真實的前提下，需要提供更高質(zhì)量的職位。結(jié)合需求的提及率和需求等級，我們輸出了產(chǎn)品的價值體系（如下圖）。

如圖所示，產(chǎn)品的價值體系分為三個層級，分別是產(chǎn)品價值、用戶價值和品牌價值。

強調(diào)產(chǎn)品價值：我們結(jié)合用戶的基礎(chǔ)需求，根據(jù)需求內(nèi)容定義“真實”內(nèi)容，例如：真實的薪資、真實的工作環(huán)境、真實的工作內(nèi)容等，第二步則是通過產(chǎn)品底層邏輯或用戶的評價反饋系統(tǒng)來創(chuàng)建這些“真實”。

提升用戶價值：用戶價值=產(chǎn)品價值-使用成本，例如：用戶要購買蘋果，A商店的蘋果質(zhì)量較高，但距離較遠。B商店的蘋果質(zhì)量一般，但距離很近。則用戶價值=蘋果質(zhì)量-商店距離。通過傳遞“真實”的方法降低用戶選擇職位的成本，從而提升用戶價值。

形成品牌價值：品牌價值的形成則是通過多個體驗維度的同時影響，以及用戶不斷的使用產(chǎn)品感受用戶價值，長期積累形成的。

f

04.發(fā)掘用戶感知拆解用戶認(rèn)知

基于前面建立的產(chǎn)品價值體系，我們來試著思考以下幾個問題：

1.我們的品牌要說什么，怎么說？

2.在價值形成的不同階段，我們的品牌分別對用戶說什么？

3.用戶希望得到什么，用戶卻只能感受到什么？

4.用戶此刻正需要什么，用戶此刻最不擅長什么？

創(chuàng)造價值不是目的，只有將價值有效的傳遞給用戶，用戶通過感受價值，從而更好的理解和使用產(chǎn)品。我們通過感知+認(rèn)知的方式重新構(gòu)建用戶體驗。

結(jié)合用戶對直接/間接競品的場景舉例我們可以發(fā)現(xiàn)，用戶對價值感知可以分為四個維度：

產(chǎn)品體驗：“產(chǎn)品”可以理解為我們售賣給用戶的商品，例如：京東的電器、招聘業(yè)務(wù)中的職位或者企業(yè)。

功能體驗：“功能”類似于服務(wù)，例如：7天無理由、簡歷優(yōu)化。

文案體驗：“文案”指的是頁面中信息字段的表達方式，是否足夠詳細(xì)、精準(zhǔn)、及時等。

界面體驗：“界面”其實就是頁面的UI風(fēng)格視覺語言。

同時我們發(fā)現(xiàn)用戶認(rèn)知的“真實”與以下幾個詞有很高的相關(guān)性。

接著我們根據(jù)價值體系的目標(biāo)，通過以上四個維度拆解具體的優(yōu)化內(nèi)容（如下圖）。

05.體驗戰(zhàn)略建立有價值的連接

清楚了價值目標(biāo)，以及用戶的認(rèn)知和感知方式，我們開始將價值與用戶做連接，也就是前面提到的價值傳遞（傳遞“真實”）。根據(jù)下圖中的公式舉兩個例子。

打造產(chǎn)品體驗：

左圖是舊版的首頁，右圖是優(yōu)化后的頁面，我們可以直觀的感受到頁面兩個產(chǎn)品的調(diào)性或者說頁面的氣質(zhì)截然不同。我們來分析一下兩者的區(qū)別，優(yōu)化后的首頁，在主視覺的位置，打造了“每日嚴(yán)選”。通過這個模塊快速建立用戶對產(chǎn)品的初步認(rèn)知。這個模塊的目的是為求職意圖強烈但職位選擇不明確的用戶提供高質(zhì)量的職位。這類用戶在整體用戶中的占比最高，同時這類用戶的痛點十分明確，他們既希望選擇一個高質(zhì)量的職位，但自身缺乏對職位品質(zhì)的判斷能力。

打造服務(wù)體驗：

為求職者提供了“安心投”服務(wù)，在用戶投遞前、投遞中、投遞后三個節(jié)點分別展示求職相關(guān)的保障，降低用戶求職顧慮和心理擔(dān)憂，提高投遞率，服務(wù)包括：

A.求職保險：求職過程中被騙造成的經(jīng)濟損失平臺會予以適當(dāng)賠付

B.隱私保護：保護用戶的相關(guān)信息，并進行加密處理

C.免打擾保護：保障用戶的私人空間不被打擾

在職位描述（左圖）的模塊后面我們加入了“安心投”，用戶了解工作內(nèi)容后的第一時間告知他投遞后我們會有哪些保障服務(wù)，從而減少他在投遞時的心理擔(dān)憂。

其次是在企業(yè)規(guī)模（右圖）的模塊中加入了“用戶評價”，露出更多真實性相關(guān)的信息輔助用戶對職位/企業(yè)的品質(zhì)進行判斷。

同樣在后續(xù)的微聊頁面我們也加入了“安全投”的提示，并且在用戶投遞后會再次與他確認(rèn)我們?yōu)樗峁┝四男┌踩Ｕ戏?wù)，進一步延伸用戶后續(xù)的操作流程。

06.總結(jié)

其實品牌形象建立的過程就是我們與用戶交朋友的過程，在這個過程中我們的個性（價值）被用戶逐漸發(fā)掘和欣賞，促使我們的關(guān)系越走越近。項目初期我們可以通過一些引導(dǎo)、開屏、二樓等方式對品牌進行宣傳和曝光，同時我們不斷提升自身的產(chǎn)品品質(zhì)，提高產(chǎn)品價值。中期我們需要進一步優(yōu)化用戶在多個維度的體驗感受，提升用戶價值（用戶價值=產(chǎn)品價值-使用成本），降低用戶使用成本，進而提高用戶使用頻次，以建立長期有效的價值連接。在這個過程中我們不斷優(yōu)化體驗，與用戶共同成長，形成牢不可破的信任價值體系，即成功搭建了一款深入人心的產(chǎn)品。

原文地址： 58UXD（公眾號）

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》體驗設(shè)計構(gòu)建品牌價值-打造影響用戶心智的價值連接

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2093)

182021-10

這些細(xì)節(jié)創(chuàng)新，大廠設(shè)計師都不一定全知道！

seo達人

雖然粗看沒多大問題，但確實是一個很常規(guī)的設(shè)計，沒有亮點。

試想，我們是否可以在布局、圖標(biāo)圖形、色彩質(zhì)感等做一些細(xì)微的突破，這些地方稍微做些改變都可以使得界面變得更好。

再比如上面這個作品，也是同樣的問題，缺乏一絲靈魂。之前看很多設(shè)計師作品集里面包裝的作品，就是這樣設(shè)計的。

雖然現(xiàn)在UI趨于模式化設(shè)計，但是我們在確保體驗最優(yōu)的同時時，還是可以做一些創(chuàng)新設(shè)計。比如布局、圖標(biāo)、色彩、質(zhì)感、雜志化等方向發(fā)力，下面我們來看看如何做一些差異化設(shè)計。

差異化圓角層疊布局

俗話說，當(dāng)然不知道如何去做創(chuàng)新時，可以去找一些好的概念設(shè)計，從里面挖掘一些新的設(shè)計想法，用在自己項目中。

例如上圖，我們將卡片圓角化與底部地圖相呼應(yīng)，整個設(shè)計看上去就有了細(xì)微縱深感。如果上下滑動時，再配上視差動態(tài)效果，那么細(xì)節(jié)也會更豐富。

上圖的設(shè)計也是同樣的思路，圓角圖片作為背景，大圓角卡片在上層疊加布局，增加細(xì)節(jié)豐富度。

再來看一些優(yōu)秀案例

圓角化布局設(shè)計在功能詳情頁的應(yīng)用。

半圓角化布局設(shè)計的應(yīng)用案例，只有一個邊用圓角來布局設(shè)計，另外一邊直角布局。

通過上面一些案例，可以提取一些布局方案用在項目上，如下圖所示。

下面這個案例通過圓角卡片來布局，貫穿所有。

看到這，大家面對改版或者0~1的探索，布局上應(yīng)該有新思路了，而且很多布局都是不斷嘗試與打磨出來的，下面我們繼續(xù)看下圖標(biāo)如何做差異化設(shè)計。

打破常規(guī)的圖標(biāo)

圖標(biāo)可以說在設(shè)計中非常重要，承載著品牌性格傳遞，表達產(chǎn)品的氣質(zhì)，但也是我們最容易忽略的地方。

如果纖細(xì)的圖標(biāo)看膩了，是不是可以嘗試下這種粗線性圖標(biāo)。

再或者就是將圖標(biāo)logo化，設(shè)計更有趣味性一些。這些圖標(biāo)應(yīng)用場景可以是功能頁面，比如像智能家居、智能鏡等場景中。

用“點”來貫穿整個圖標(biāo)設(shè)計，下圖，韓國NAVER的圖標(biāo)設(shè)計，通過點與線的集合來打造記憶點。

Naver

圖標(biāo)與品牌色集合，這種雖然現(xiàn)在應(yīng)用較多，但是可以從不同角度來切入。比如上圖中使用填充品牌色與斷線集合，形成一種不一樣的設(shè)計思路。

最后一種思路圖標(biāo)進行品牌化設(shè)計，整套圖標(biāo)延續(xù)品牌DNA特征。

上圖app設(shè)計，里面圖標(biāo)就是將品牌DNA符號延續(xù)到整套系統(tǒng)里面，包括底部bar的功能圖標(biāo)和表情符號等。

彌散光感漸變背景

很多情況下會遇到需要做詳情頁或者個人頁面，這時候就會涉及到頭像與背景的關(guān)系設(shè)計。目前設(shè)計較多的方式就是高清大圖、品牌圖形、漸變色等。那么還可以用下面這種思路。

使用彌散光感漸變作為背景，相對于單一的漸變色，會多了一絲細(xì)節(jié)在里面。

好了，今天分享就到這，早期我們在做創(chuàng)新探索時候，不要懼怕太過于概念，如果一直被這個限制，就難以打破思維的墻，做出來的設(shè)計幾乎很平庸。我們還是敢于挑戰(zhàn)自己，善用逆向思維。

原文地址：功夫UX （公眾號）

作者：功夫UX

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》這些細(xì)節(jié)創(chuàng)新，大廠設(shè)計師都不一定全知道！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(1910)

172021-10

人工智能的十大技術(shù)及應(yīng)用

資深UI設(shè)計者

人工智能從誕生以來，其理論和技術(shù)日益成熟，應(yīng)用領(lǐng)域也不斷擴大。本篇作者給我們介紹了人工智能的十大技術(shù)及其相關(guān)應(yīng)用，一起來看看吧。

人工智能發(fā)展到現(xiàn)在已經(jīng)將近有80年的歷史。近日來特斯拉也說了自己不是汽車公司，是可再生能源公司、是機器人公司、是人工智能公司，特斯拉也明確表示未來人工智能汽車自動化駕駛的方向是視覺識別+機器學(xué)習(xí)。

人工智能從誕生以來，其理論和技術(shù)日益成熟，應(yīng)用領(lǐng)域也不斷擴大，接下來我將給大家介紹下人工智能的十大技術(shù)及其相關(guān)應(yīng)用。

一、問題求解

人工智能的第一個大成就是發(fā)展了能夠求解難題的下棋程序。在下棋程序中應(yīng)用的某些技術(shù)，如向前看幾步，把困難的問題分成一些比較容易的子問題，發(fā)展成為搜索和問題歸約這樣的人工智能基本技術(shù)。今天的計算機程序能夠下錦標(biāo)賽水平的各種方盤棋、十五子棋、國際象棋和圍棋。

1997年5月，IBM公司研制的深藍(DeepBlue)計算機戰(zhàn)勝了國際象棋大師卡斯帕洛夫(Kasparov)。另一種問題求解程序把各種數(shù)學(xué)公式符號匯編在一起，其性能達到很高的水平，并正在為許多科學(xué)家和工程師所應(yīng)用。有些程序甚至還能夠用經(jīng)驗來改善其性能。

二、邏輯推理與定理證明

邏輯推理是人工智能研究中最持久的子領(lǐng)域之一。其中特別重要的是要找到一些方法，只把注意力集中在一個大型數(shù)據(jù)庫中的有關(guān)事實上，留意可信的證明，并在出現(xiàn)新信息時適時修正這些證明。對數(shù)學(xué)中臆測的定理尋找一個證明或反證，確實稱得上是一項智能任務(wù)。

為此，不僅需要有根據(jù)假設(shè)進行演繹的能力，而且需要某些直覺技巧。1976年7月，美國的阿佩爾(K.Appe1)筆人合作解決了長達124年之久的難題–四色定理，轟動了整個計算機界。他們用了三臺大型計算機，花了1200小時。

三、自然語言理解

自然語言處理是人工智能的早期研究領(lǐng)域之一，已經(jīng)編寫出能夠從內(nèi)部數(shù)據(jù)庫回答用英語提出的問題的程序，這些程序通過閱讀文本材料和建立內(nèi)部數(shù)據(jù)庫，能夠把句子從一種語言翻譯為另一種語言，執(zhí)行用英語給出的指令和獲取知識等。有些程序甚至能夠在一定程度上翻譯從話筒輸入的口頭指令（而不是從鍵盤輸入計算機的指令）。人工智能在語言翻譯與語音理解程序方面已經(jīng)取得可喜的成就。

四、自動程序設(shè)計

自動程序設(shè)計是人工智能的一個重要研究領(lǐng)域。目前已經(jīng)研制出能夠以各種不同的目的描述來編寫計算機程序。對自動程序設(shè)計的研究不僅可以促進半自動軟件開發(fā)系統(tǒng)的發(fā)展，而且也使通過修正自身數(shù)碼進行學(xué)習(xí)(即修正它們的性能)的人工智能系統(tǒng)得到發(fā)展。

五、專家系統(tǒng)

專家系統(tǒng)是一個具有大量專門知識與經(jīng)驗的計算機程序系統(tǒng)，它應(yīng)用人工智能技術(shù)，根據(jù)某個領(lǐng)域一個或多個人類專家提供的知識和經(jīng)驗進行推理和判斷，模擬人類專家的決策過程，以解決那些需要專家決定的復(fù)雜問題。

專家系統(tǒng)可以解決的問題一般包括解釋、預(yù)測、診斷、設(shè)計、規(guī)劃、監(jiān)視、修理、指導(dǎo)和控制等。隨著人工智能整體水平的提高，專家系統(tǒng)也得到發(fā)展。在新一代專家系統(tǒng)中，不但采用基于規(guī)則的方法，而且采用基于模型的原理。

六、機器學(xué)習(xí)

學(xué)習(xí)是人類智能的主要標(biāo)志和獲得知識的基本手段。香克(R.Shank)認(rèn)為：

一臺計算機若不會學(xué)習(xí)，就不能稱為具有智能的。

機器學(xué)習(xí)的主要目的是為了從使用者和輸入數(shù)據(jù)等處獲得知識，從而可以幫助解決更多問題，減少錯誤，提高解決問題的效率。

七、神經(jīng)網(wǎng)絡(luò)

人腦是一個功能特別強大、結(jié)構(gòu)異常復(fù)雜的信息處理系統(tǒng)，其基礎(chǔ)是神經(jīng)元及其互聯(lián)關(guān)系。對人腦神經(jīng)元和人工神經(jīng)網(wǎng)絡(luò)的研究，可能創(chuàng)造出新一代人工智能機器。

20世紀(jì)80年代以來，神經(jīng)網(wǎng)絡(luò)研究職又得重大進展。例如，霍普菲爾德(Hopfield)提出用硬件實現(xiàn)神經(jīng)網(wǎng)絡(luò)，魯梅爾哈特(Rumelhart)等提出多層網(wǎng)絡(luò)中的反向傳播(BP)算法。

目前，神經(jīng)網(wǎng)網(wǎng)絡(luò)已在模式識別、圖像處理、組合優(yōu)化、自動控制、信息處理、機器人學(xué)和工智能其他領(lǐng)域獲得日益廣泛的應(yīng)用。

八、模式識別

模式識別是指識別出給定物體所模仿的標(biāo)本，如文字識別、汽車牌照識別、指紋識別、語音識別等。這是一種用計算機代替人類或幫助人類的感知模式，是對人類感知外界功能的模擬，使一個計算機系統(tǒng)具有模擬人類通過感官接收外界信息、識別和理解周圍環(huán)境的感知能力。

九、機器視覺

機器視覺或計算機視覺已從模式識別的一個研究領(lǐng)域發(fā)展為一門獨立的學(xué)科。視覺是感知問題之一。在人工智能中研究的感知過程通常包含一組操作。例如，可見的景物由傳感器編碼，并被表示為一個灰度數(shù)值的矩陣。這些灰度數(shù)值由檢測器加以處理。

檢測器搜索主要圖像的成分，如線段、簡單曲線和角度等。這些成分又被處理，以便根據(jù)景物的表面和形狀來推斷有關(guān)景物的三維特性信息。機器視覺已在機器人裝配、衛(wèi)星圖像處理、工業(yè)過程監(jiān)控、飛行器跟蹤和制導(dǎo)以及電視實況轉(zhuǎn)播等領(lǐng)域獲得極為廣泛的應(yīng)用。

十、智能控制

智能控制是一類不需要(或需要盡可能少的)人的干預(yù)就能夠獨立地驅(qū)動智能機器實現(xiàn)其目標(biāo)的自動控制，是自動控制的高級階段。1965年，傅京孫首先提出把人工智能的啟發(fā)式推理規(guī)則用于學(xué)習(xí)控制系統(tǒng)。十多年后，建立實用智能控制系統(tǒng)的技術(shù)逐漸成熟。

百度公司董事長兼首席執(zhí)行官李彥宏認(rèn)為，人工智能是具有顯著產(chǎn)業(yè)溢出效應(yīng)的基礎(chǔ)性技術(shù)，能夠推動多個領(lǐng)域的變革和跨越式發(fā)展。例如：人工智能可以加速發(fā)現(xiàn)醫(yī)治疾病的新療法，大幅降低新藥研發(fā)成本；可以帶動工業(yè)機器人、無人駕駛汽車等新興產(chǎn)業(yè)的飛躍式發(fā)展；可以大幅提升國防信息化水平，加速無人作戰(zhàn)裝備的應(yīng)用。人工智能技術(shù)將極大地提升和擴展人類的能力邊界對促進技術(shù)創(chuàng)新、提升國家競爭優(yōu)勢，乃至推動人類社會發(fā)展產(chǎn)生深遠影響。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：人人都是產(chǎn)品經(jīng)理作者：汪仔2461

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(8334)

172021-10

中臺系統(tǒng)基礎(chǔ)知識-文字規(guī)范系統(tǒng)

資深UI設(shè)計者

版式設(shè)計是大部分設(shè)計師再熟悉不過的一個詞了，市面上很多文章都有普及過各種版式設(shè)計知識，比如：印刷中的版式設(shè)計、移動界面中的版式設(shè)計等等。但是在我做中臺規(guī)范時調(diào)研發(fā)現(xiàn)針對中臺系統(tǒng)文字規(guī)范內(nèi)容科普的知識較少，可能是中后臺設(shè)計在國內(nèi)還是處于初級階段吧。所以結(jié)合調(diào)研內(nèi)容到實際工作中的總結(jié)給大家分享關(guān)于Web端文字系統(tǒng)的相關(guān)內(nèi)容。

加拿大印刷術(shù)家羅伯特·布林赫斯特（Robert Bringhurst）在他撰寫的《印刷風(fēng)格的元素》一書中將印刷術(shù)定義為以持久的視覺形式賦予人類語言的技藝。在中臺界面文字排版的易讀性、美觀度是設(shè)計師的首要任務(wù)，要創(chuàng)建閱讀性高和較美觀的中臺界面文字排版是設(shè)計師們必須學(xué)習(xí)的基礎(chǔ)知識之一。因為不論在App界面還是Web網(wǎng)頁設(shè)計中文字內(nèi)容總是能占到整個版面的80%～90%的區(qū)域，好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個網(wǎng)頁設(shè)計師的角度分享Web端界面中文字系統(tǒng)的基礎(chǔ)知識，從基本網(wǎng)頁中的系統(tǒng)字體初識、字體排版基礎(chǔ)理論、國際化文字適配，希望大家能夠合理運用在中臺界面的版式中。

內(nèi)容概覽

網(wǎng)頁字體應(yīng)用發(fā)展

1、網(wǎng)頁排版初期

1990年12月25日，英國計算機科學(xué)家蒂莫西·約翰·伯納斯-李爵士（Tim Berners-Lee）成功發(fā)明了萬維網(wǎng)，并弄清了統(tǒng)一資源定位符（URL），其中超文本傳輸協(xié)議（HTTP）和超文本標(biāo)記語言（HTML）的概念后，他在Internet上發(fā)布了第一個網(wǎng)站。自從Internet發(fā)明以來，字體在Web上扮演著重要角色。1990年至今，網(wǎng)絡(luò)已經(jīng)徹底改變了我們的生活方式和工作方式。在最初的20年中，Web經(jīng)歷了許多變化，例如采用Web標(biāo)準(zhǔn)，使用CSS進行布局以及處理動態(tài)數(shù)據(jù)。雖然網(wǎng)絡(luò)從一開始就包含文本，但直到最近幾年它們才得到很好的應(yīng)用。

在1990年代中期，英國字型大師馬修·卡特（Matthew Carter）設(shè)計的Georgia和Verdana兩款字體廣泛用在基于屏幕的網(wǎng)頁中。為了使字體在當(dāng)時分辨率較低的屏幕上清晰易讀，馬修·卡特設(shè)計的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對網(wǎng)頁上的文本進行處理，Georgia和Verdana首先在位圖中進行設(shè)計，以適配當(dāng)時網(wǎng)頁屏幕的分辨率，最后把文字轉(zhuǎn)換為輪廓字體，進行文字圖形化。

1990年代到2000年代中期是網(wǎng)頁設(shè)計的一段過渡時期網(wǎng)頁更加圖形化，系統(tǒng)默認(rèn)自帶的字體如：Georgia、Verdana、Arial、Helvetica、Times New Roman已經(jīng)滿足不了設(shè)計師們的設(shè)計需求。設(shè)計師們必須使用Photoshop和Illustrator等相關(guān)工具將一些特殊字體的每一段文本切成圖偏提供給開發(fā)人員，但是這種方式有著很多弊端，問題主要集中于本文不可選擇、復(fù)制、翻譯甚至是不可搜索。其中newyorker.com可作為典型代表，其網(wǎng)站在使用Typekit（可提供其自定義字體庫）之前，為了讓網(wǎng)頁與原印刷出版物保持一致，便使用了切圖方式將特殊定制化文本進行切圖處理，直到該該公司2010年11月開始使用Typekit自定義字體庫后才解決字體圖形化這種耗時耗力的方式。

2、自定義字體庫“Typekit”

在上面提到了在Jeff Veen還未創(chuàng)立字體服務(wù)Typekit之前，很多時候系統(tǒng)自帶的幾種字體滿足不了設(shè)計師需求，所以設(shè)計師們使用文本轉(zhuǎn)圖片的技術(shù)進行處理。為了解決這些問題肖恩·英曼（Shaun Inman）2004年開發(fā)了SIFR，雖然SIFR解決了圖片切圖問題，但其中也還是有一些問題存在，比如，太過依賴Flash，并且設(shè)置SIFR還需要掌握大量的相關(guān)知識，門檻較高。2009年Simo Kinnunen又將技術(shù)改進稱為Cufón，他使用canvas和VML快速替換文本，無需Flash或圖像。Cufón由兩部分組成：一個字體生成器（將字體轉(zhuǎn)換為專有格式）和一個用JavaScript編寫的渲染引擎。雖然文本圖片轉(zhuǎn)化技術(shù)一直在不斷完善中，但是歸根結(jié)底文本圖片轉(zhuǎn)化技術(shù)并不是網(wǎng)頁中的文字排版。

直到2009年Jeff Veen離開了Google并且同一年創(chuàng)立了字體在線服務(wù)Typekit，極大的豐富了設(shè)計們的字體選擇。2011年Adobe收購Typekit（也就是現(xiàn)在Adobe Fonts），并且Jeff Veen也因此成為Adobe產(chǎn)品的副總裁，負(fù)責(zé)Creative Cloud業(yè)務(wù)，負(fù)責(zé)Adobe旗下幾乎所有產(chǎn)品的在線體驗。

3、可變字體

可變字體指的是一個字體默認(rèn)狀態(tài)進行多個樣式擴展，他是一種含有多種變化的單一字體：即所有字寬和粗細(xì)、甚至是斜體的變化都可以包含在一個單一、高效且可壓縮的字體文件中。比如說PingFang SC，如果在系統(tǒng)上使用，同時包含了六種字重：常規(guī)體、中等、細(xì)體、特粗體、特細(xì)體、粗體。

可變字體是由Adobe, Apple, Google, Microsoft四大巨頭在20016年9月聯(lián)合在波蘭華沙的ATypI會議上宣布的Variable Font的字體規(guī)格OpenType，OpenType特點在于可將多個字體打包成一個字體，并且不會增大字體文件包的大小。他解決了某單個字體文件可以獲取各種粗細(xì)，寬度，高度，樣式和其他屬性的問題，具有靈活性。可變字體為Web上的排版提供了一個跨時代的變化。目前排版軟件廠商、字體設(shè)計師、字體廠商都積極地大量投入可變自己提的研究和開發(fā)設(shè)計，并且廣泛運用在操作系統(tǒng)和印刷行業(yè)。

目前在主流的操作系統(tǒng)、瀏覽器、設(shè)計軟件都在不同程度上支持可變字體。像操作系統(tǒng)，Mac os、iOS、Android、Wear OS、Fuchsia。瀏覽器Safari、Chrome、Edge、Firefox。設(shè)計界最為熟知的圖像編輯工具Photoshop、Illustrator、Sketch、Figma也已支持可變字體，設(shè)計師可以使用該設(shè)計工具進行同款字體不同樣式的使用。

舉個比較比較典型的例子，在2019年9月小米推出了全新的 MIUI 11 系統(tǒng)，并帶來了小米蘭亭Pro動態(tài)字體系統(tǒng)，小米蘭亭Pro字體聯(lián)合方正字庫聯(lián)合開發(fā)。在 MIUI 11操作系統(tǒng)中，用戶可以通過系統(tǒng)設(shè)置進入字體模塊，拖動相應(yīng)滑塊即可改變手機界面用字的字體大小和字重粗細(xì)。MIUI動態(tài)字體支持文字粗細(xì)無級調(diào)節(jié)，每個人都可找到適合自己的字重，下圖是MIUI 11系統(tǒng)中可變字體的演示：

網(wǎng)頁中的字體

1、字體工具推薦

字體是體系化界面設(shè)計中最基本的構(gòu)成之一，選擇字體是一個具有創(chuàng)造性和情感的過程，因為不同的字體傳達出不同的情感。在制定用戶界面規(guī)范時科學(xué)的定義字體規(guī)范系統(tǒng)，不僅能夠有效的表達出不同的設(shè)計風(fēng)格，還能通過定義字體的字族、字階、字重、字體顏色、字體行高，有效幫助設(shè)計師在設(shè)計界面時使用字體達到統(tǒng)一性和整體性，保證界面有良好的閱讀體驗。首先，先為大分享一些非常實用的字體網(wǎng)站。

1.1 Adobe Font

第一個我要推薦的是Adonbe旗下的Adobe Font，網(wǎng)站中有非常多優(yōu)秀的字體。但是網(wǎng)站字體需要收費，一般是按照使用量的形式進行支付版權(quán)費，特點是可設(shè)置屬性進行字體樣式實時預(yù)覽，并且字體比較全。

1.2 Google Fonts

在Google Fonts，你可以免費下載你喜歡的字體，并且按照你的需要在項目中使用。由于在系統(tǒng)中使用其他字體的唯一方法就是將字體文件導(dǎo)入到系統(tǒng)中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統(tǒng)使用的默認(rèn)字體。

1.3 求字體網(wǎng)

設(shè)計師在做設(shè)計時常常會遇到某些網(wǎng)站或海報使用的字體特別喜歡，但是苦惱無法獲取改字體的信息導(dǎo)致無法下載使用，求字體網(wǎng)解決了此痛點。你可以將喜歡的字體進行截圖并上傳到網(wǎng)站進行字體識別，確定后他會提供出字體下載鏈接或者字體信息，解決設(shè)計師們喜歡某個字體而找不到的煩惱。

1.4 字由

字由也是我比較推薦的一個字體網(wǎng)站，個人用的也會比較多。官網(wǎng)將全部字體進行整理分類方便用戶快捷尋找字體，并且有個分類是免費商用字體庫，避免了常常困惑的設(shè)計師使用字體導(dǎo)致版權(quán)糾紛問題。此有網(wǎng)站有兩大亮點，第一是此網(wǎng)站在設(shè)計師選用字體時有個實際運用預(yù)覽效果，直觀的看到字體在實際使用效果，第二是網(wǎng)站提供客戶端下載，在客戶端中點擊下載以后可直接進行在設(shè)計工具中直接使用。

2、如何定義系統(tǒng)“字族”

在選用系統(tǒng)字體時需要考慮在不同系統(tǒng)的兼容性，大家都知道在不同的操作系統(tǒng)及不同的游覽器中默認(rèn)顯示的字體是不一樣的，并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同。在做字體規(guī)范時需要提供一套系統(tǒng)完整的字族，里面不僅需要包含系統(tǒng)默認(rèn)的界面字體，還需要一套有利于屏幕顯示的備用字體，方便維護不同系統(tǒng)及瀏覽器的實現(xiàn)，保證在任何場景保持良好的閱讀性和可讀性，下面是我在做界面規(guī)范時與相關(guān)同學(xué)一起選取的界面字體。

第一部分：-apple-system是在以WebKit為內(nèi)核的瀏覽器，比如蘋果的Safari中調(diào)用蘋果系統(tǒng)macOS、iOS、watchOS、tvOS中默認(rèn)字體，目前一般情況下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中調(diào)用蘋果系統(tǒng)的字體。

第二部分：主要是提供了Windows和MacOS下的字體。其中Segoe UI針對Windows and Windows Phone等系統(tǒng)。PingFang SC是蘋果為中國用戶打造了一款全新中文字體，整體樣式看上去更加簡潔，字族共6個字體：極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡體中文版，由日本設(shè)計師為MacOS和iOS系統(tǒng)中內(nèi)置字體，簡體中文有常規(guī)體和粗體兩種，冬青黑體是一款清新的專業(yè)印刷字體，其小字在屏幕顯示時足夠清晰，擁有很多用戶的追捧。Microsoft YaHei是從Vista開始，微軟提供了這款新的字體，它是一款無襯線的黑體類字體，并且擁有Regular、Bold兩種粗細(xì)的字重，字重有效提高了字體的層級顯示效果。目前這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細(xì)的字重，對于喜歡細(xì)字體的設(shè)計或開發(fā)人員又多了一個新的選擇。

第三部分：主要是系統(tǒng)備用兜底字體，Helvetica Neue在沒有El Capitan versions系統(tǒng)的電腦中是最流行的，所以作為兜底，sans-serif也是常見的兜底字體；

第四部分：主要是系統(tǒng)的emoji，在我們的規(guī)范中選用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 針對在macOS和Windows顯示emoji。

3、如何定義字體規(guī)范

在設(shè)計規(guī)范系統(tǒng)中字體是用戶體驗相當(dāng)重要的一部分，因為不論在App界面還是Web網(wǎng)頁設(shè)計中，不同的系統(tǒng)分辨率、不同的顯示器尺寸、不同的DPI都會對最終展現(xiàn)的文字大小帶來影響，并且文字在內(nèi)容區(qū)總是能占到整個版面的80%～90%的區(qū)域，所以要根據(jù)用戶使用電腦的分辨率給予用戶一個比較合適的默認(rèn)字號。那么這個字號多大合適呢？是12px、13px、14px還是15px比較合適呢，所以我們回到這個老生常談的問題進行分析。

3.1 定義默認(rèn)字體大小

在做規(guī)范時調(diào)研了在市面上各大較流行的網(wǎng)站，目前大部分文本類字體大小都采用了12px-14px范圍的文字大小。另外Windows自帶的點陣宋體從Vista開始只提供12px、14px、16px三個大小的點陣。所以，如果13px、15px、17px雖然每個字的空間大了1px但是點陣卻沒變，從視覺上會顯得略稀疏，可能導(dǎo)致顯示效果不佳。偶數(shù)字號的文字，比如12px的“中”字，去掉1像素的間距，填充了像素的實際寬是11px，文字的中豎線左右是平分的顯得均衡，具有美感。如下圖所示：

但是也有少部分網(wǎng)站使用基數(shù)作為文本大小，比如知乎正文使用15px，豆瓣首頁標(biāo)題下面的的簡介文字使用的13px大小，我簡單的分析了一下，知乎在改版之前文本類內(nèi)容用的13pt大小的可能是有用戶吐槽頁面文字太過于密集后來統(tǒng)一改成了15pt，知乎和花瓣頁面雖然使用的是基數(shù)但是整體效果還算不錯。不過為了字體使用更加的“安全”還是推薦偶數(shù)作為文本規(guī)范。

還有些因素會比較推薦用偶數(shù)，比如說從瀏覽器角度上看，因為某些電腦的瀏覽器上如在IE6瀏覽器會把基數(shù)的字號自動渲染成偶數(shù)系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設(shè)置字體大小屬性時從12px以上都是采用偶數(shù)進行快捷選擇，這也形成了一種常見的習(xí)慣。

在文字規(guī)范時也借鑒了設(shè)計界大佬AntDesign的規(guī)范，Ant Design 3.0 的時候，對主字號進行了研究，飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對 Ant Design 的主字體進行了一次升級，從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳?！?

同時我們也站在電腦屏幕分辨率也有過調(diào)研，在上一篇分享分享的系統(tǒng)布局中也提到了，目前大部分中臺系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800，因此在這些主流電腦分辨率中經(jīng)過實驗，14px小大的文字效果以及閱讀體驗會比12px更加的舒適，并且內(nèi)容會更加的清晰。

總結(jié)以上幾點分析我們得出，在界面中使用偶數(shù)會比基數(shù)更加的美觀、安全，也比較利于設(shè)計師的使用習(xí)慣，并且在糾結(jié)使用12px還是14px字體大小的很長一段時間里我們經(jīng)過調(diào)研競品以及進行不同屏幕分辨率下字號的實驗最后確定我們字號使用14px正常文本大小，12px可作為輔助文字使用。

3.2 行寬

行寬是指一行字的長度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結(jié)構(gòu)分析，人在閱讀文字的時候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運動。行寬越長，眼睛移動的距離太長太多。寬度較大，眼動位移較大，讀者閱讀換行時容易串行。行寬越短，眼睛閱讀折行的次數(shù)太多。行數(shù)較多，眼動跳躍次數(shù)多，讀者閱讀行時會感覺到文字不連續(xù)?！彼栽诓僮鹘缑嬷斜苊膺^長、行數(shù)較多的文字，閱讀是大腦活動中一種最復(fù)雜的過程，比如說在操作系統(tǒng)中界面操作較復(fù)雜，如果出現(xiàn)大段的文字用戶不僅要操作復(fù)雜的系統(tǒng)，還需要進行閱讀理解大大降低了用戶的使用效率。

加拿大印刷大師羅伯特·布林赫斯特（Robert Bringhurst）有一個算法是：行寬=字號x30，例如：設(shè)置字號為14px大小，那么我們建議其基礎(chǔ)行寬是420px左右。中文一個字體寬度是14px，那么建議一行建議30個文字。注：在文字寬度規(guī)范時，為了考慮國際化的適配，避免多語言差異我們不以文字個數(shù)作為度量單位，而是以整個行寬來計算，比如說表單Title、Table。

3.3 行高

行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號 + 行間距，而不是單指字體高度，所以文字的高度不等于字號的高度，如：字號12px，行高為22px，根據(jù)Web頁面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：

網(wǎng)頁中版式原理

1、視覺層級

在頁面布局分享有提過視覺層次，因為視覺層次是設(shè)計過程中的核心方法之一，對于中臺的UI設(shè)計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在UI設(shè)計師設(shè)計界面時需要把界面中很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對比度，樣式等區(qū)分對象。

視覺層次中的“層次”其實講的是在設(shè)計用戶界面過程中設(shè)計師需要有在內(nèi)容上進行取舍，保證用戶使用產(chǎn)品時能夠讓用戶強烈的感知內(nèi)容的主次，并且內(nèi)容和功能優(yōu)先級的高度進行區(qū)分，有效的減少用戶在操作界面時對內(nèi)容需要就行二次過濾。比如說某個提示說明在頁面上最高，那么此提示在界面中一眼看過去需要最被突出和強調(diào)的。如果用戶界面看起來一團“糊”，那么這個設(shè)計是失敗的，因為它不能有效的幫助用戶進行內(nèi)容篩選，導(dǎo)致用戶還需要使用時花大量時間去閱讀操作。

視覺層次分為4個基礎(chǔ)部分，其中包含了大小對比、字重對比、位置對比、顏色對比。

同樣還是用蘋果官網(wǎng)作為案例，真心覺得官網(wǎng)設(shè)計太好了。蘋果的設(shè)計一直以來都是引領(lǐng)著設(shè)計趨勢，其設(shè)計被國內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強烈的大小對比，用戶進入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：

2 格式塔定律

格式塔原理或格式塔定律是感知場景組織的規(guī)則，人們感知由許多元素組成的復(fù)雜對象時，會采用有意識或無意識的方法將這些元素安排到整個組織的系統(tǒng)中，而不只是單一的元素級。它適用于不同級別的感知，其中視覺部分是設(shè)計師設(shè)計界面時最能體現(xiàn)價值的部分。

格式塔（Gestalt）這個術(shù)語來自德語單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運動背后的基本思想：“整體不是元素基因的總和”。官網(wǎng)概括：“在心理現(xiàn)象中，人們對客觀對象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。在用戶打開界面進行閱讀或者操作界面時視覺的第一感受是產(chǎn)品的整體效果，而并不會感知到一些較細(xì)節(jié)的元素。

在設(shè)計用戶界面時需要理解格式塔定律中5大定律，分別是接近、相似、閉合、連續(xù)、簡單，其中兩個最重要的定律分別是接近定律和相似定律，這兩個定律主要描述了我們感知事物的核心方式。

2.1 接近定律

人類的大腦總是把一些細(xì)節(jié)復(fù)雜的元素分析歸類，將相對靠近或有相似的連接點的內(nèi)容作為一個整體，在我們的生活中有類似的在我們的現(xiàn)實的生活中有很多自然規(guī)律中遵守了格式塔原理的接近定律，比如說比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴(yán)密，并且群體在同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產(chǎn)生人字形或一字形的圖形。當(dāng)你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形，是因為蓬松的氣體發(fā)生形變，形成了酷似動物或生活中熟悉的物體。這其實都是人類大腦通過潛意識進行腦補和整理出來的畫面，如下圖中的元素彼此靠近的元素歸為一組，相反距離較遠的元素被視為不同組。

其中在元素排布中也有一定的規(guī)律性，比如當(dāng)行向間距大于列間距時，那么視覺的行排布的橫向關(guān)系密切形成整體。當(dāng)縱向間距大于列間距時，那么視覺的列排布的縱向關(guān)系形成整體，如下圖所示：

以今日頭條和優(yōu)酷視頻作為案例，首先進入到今日頭條首頁后映入眼簾的是無窮式的信息流?？梢钥闯鲈O(shè)計師使用接近原則對信息進行分組、組織內(nèi)容和整理布局?？ㄆ休d的內(nèi)容形成模塊，模塊與模塊之間的這里發(fā)揮著至關(guān)重的的作用，因為它引導(dǎo)用戶眼睛朝向預(yù)期的方向，有效引導(dǎo)用戶使用。并且其排列方式是比較典型的縱向關(guān)系，可以看出行間距小于列間距，增強了縱向關(guān)系，有助于用戶閱讀和分類。把重要信息流的內(nèi)容模塊放置中間位置，其他次要內(nèi)容放置左右兩列。

優(yōu)酷視頻是個大型視頻分享平臺，進入到首頁同樣是無窮式的視頻類信息流。我們可以看到產(chǎn)品排列方式與今日頭條正好相反，除了頂部導(dǎo)航以外內(nèi)容區(qū)的行間距大于列間距，增強了橫向關(guān)系并且以橫向關(guān)系密切形成了整體，屬于典型的橫向關(guān)系排列。其中視頻封面與下面的文本形成一個內(nèi)容小組，內(nèi)容小組與內(nèi)容小組形成一個大分類。由于產(chǎn)品視頻分類較多，所以從頁面排版上使用橫排關(guān)系將白色的空間增強了視覺層次感有效將視頻類型橫向區(qū)分，幫助用戶更快的找到相關(guān)類型的視頻內(nèi)容。

2.2 相似定律

接下來再說下相似定律。人們大腦總是把一些相似視覺特征的元素被認(rèn)為是一類，與不具有相似視覺特征相比較具有相似特征的元素關(guān)聯(lián)性更強。在用戶界面排版中具有相似功能的元素在樣式上應(yīng)該保持一致，比如說在操作界面中Link的顏色為藍色，那么用戶在操作界面時默認(rèn)會把藍色的文字理解為可點擊Link。

設(shè)計師在設(shè)計界面過程中可以使用相似定律將元素進行元素分組、元素組織、元素布局。但是需要強調(diào)界面中相同的元素（組件），如按鈕、下拉、標(biāo)題、正常文本等一些基礎(chǔ)組件需要使用相同的設(shè)計語言，保持一致的顏色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里說過：“在界面設(shè)計中，要采取一致的行動順序”。因為用戶會將視覺屬性相似的內(nèi)容分組，將最相關(guān)的內(nèi)容彼此靠近作為小組，小組與小組之間可組合成大組也就是我們在布局中提到的模塊，最后由模塊組合呈現(xiàn)出頁面形態(tài)。

西瓜視頻是個性化推薦短視頻平臺，從下圖中可以看到首頁分為影視和短視頻兩類，這也是西瓜視頻的兩大特色功能。設(shè)計師在設(shè)計界面時考慮到影視和短視頻這兩大類視頻需要在視覺感知上需要進行區(qū)分，所以設(shè)計師運用了相似定律進行設(shè)計，其中豎版視頻封面與下面的文本形成一種內(nèi)容小組，橫版視頻封面與下方內(nèi)容組合形成另一種內(nèi)容小組。以不同的形狀來告知用戶的功能類型差異。如下圖所示：

2.3 小結(jié)

在網(wǎng)頁設(shè)計中不論是視覺層級還是格式塔定律，其實都是由我們?nèi)祟惖拇竽X神經(jīng)感知事物的規(guī)律總結(jié)而來，在生活中每個人潛意識都具備這種技能，因為人們總是喜歡有規(guī)律的事物，規(guī)律可以讓事情變得更容易理解。同理在設(shè)計用戶界面時不僅僅是為了漂亮美觀，還需將界面中內(nèi)容有效的進行梳理并傳達給用戶。

適配多語言切換

隨著公司業(yè)務(wù)不斷快速發(fā)展以及互聯(lián)網(wǎng)信息的快速交流與傳播，很多產(chǎn)品已經(jīng)突破地域的邊界走向了海外市場，并且個人也因為在實際項目中產(chǎn)品切換多語言時產(chǎn)生了各種各樣的體驗問題，所以為了提高規(guī)范體驗設(shè)計師們應(yīng)該提前自主探索和思考關(guān)于產(chǎn)品國際化的相關(guān)內(nèi)容。今天主要淺談文本適配問題。

1、預(yù)留出足夠的文字空間

在實際的工作中會遇到界面使用中文時布局非常的合理，但是一切換到其他語言時出現(xiàn)各種折行或者是遮擋的問題。主要原因是因為文字的長度會因語言不同而異，即使是使用同類字形的語言也是如此，比如說英文“New”翻譯成法語是“Nouvelle”，并且法語的感嘆號前面還需要留一個空格，字符數(shù)從4個變成了8個。所以設(shè)計師在做規(guī)范時一定要考慮預(yù)留出更大翻譯空間，以下是網(wǎng)上找的一些Bad case。

2、書寫順序

在多語言適配時我們發(fā)現(xiàn)很多書寫系統(tǒng)，如阿希伯來語、拉伯語、波斯語、烏爾都語等，都是以右到左對齊方式進行字符顯示，并且在相同的字體大小情況下，這些字體可能看起來比西伯來語字體要小，所以需要考慮調(diào)整行間距和對齊方式，使得不同字體在相同界面中都適用。并且使用這些語言的人口數(shù)量相當(dāng)大，特別是在波斯灣地區(qū)由于石油經(jīng)濟發(fā)展特別迅速。對于面對中東地區(qū)出海的產(chǎn)品，是不能回避的問題，所以要及時作出可配性方案。

3、匹配不同行高

在多語言適配時因為不同的語言可能在同一界面中需要設(shè)定不同的行高達到最佳效果，可以定義3種行高尺寸來做多語言適配，分別為大（l）、常規(guī)（lg）、?。╯）。從下圖可以看出區(qū)別較大的是泰語和阿拉伯語的字型高度相差較大，可利用相對合理的行高尺寸進行匹配，比如泰語字型較高可使用大（l）尺寸作為文本行高，阿拉伯語字型較低可使用?。╯）尺寸作為文本行高。

4、避免組件與文本混排

設(shè)計師在設(shè)計界面時經(jīng)常遇到文本與組件的組合排版方式，但是其中會有比較多的“坑”，設(shè)計師們很容易不小心就陷入“坑”中。舉個例子，比如設(shè)計師們會為了更加美觀會把組件插入一段文本中間中進行混合排版，這種組合方式有幾個比較大弊端。第一不同語種有不同語法順序，比如法語形容詞的后置，日語里動詞的后置。第二復(fù)數(shù)問題，在英語里面，每個名詞都有一個單數(shù)形式和一個復(fù)數(shù)形式，比如One picture復(fù)數(shù)是Two pictures。但在俄語里面，復(fù)數(shù)有三種可能的形式。在法語里面，有不少單詞變成復(fù)數(shù)之后拼寫也會改變。所以，如果用戶要在句子中間輸入數(shù)字這種設(shè)計就可能造成語法錯誤。第三有些語言里面，單詞是區(qū)分陰陽性的。比如在法語里面，形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個下拉菜單框，那么可能又會造成語法錯誤。

5、小結(jié)

產(chǎn)品國際化題材比較大涉及到的內(nèi)容也會比較廣，可能需要考慮的不僅限于文本適配，還需要考慮很多的因素比如說各國的文化差異、本地格式、地區(qū)標(biāo)準(zhǔn)等等，所以今天主要站在文字適配的角度給大家分享幾個做國際時需要關(guān)注的小點。

寫在最后

本篇文章主要是網(wǎng)頁中文字系統(tǒng)初識，網(wǎng)頁中的文字雖然看起來比較簡單但是每個內(nèi)容板塊拆分開都是值得深挖的。比如說文字結(jié)構(gòu)、如何結(jié)合印刷理論應(yīng)用到網(wǎng)頁排版中、解刨多語言適配等等吧。本片文章還是秉著啟發(fā)的態(tài)度與大家進行網(wǎng)頁文字系統(tǒng)的探索，希望大家能夠可根據(jù)此篇文章結(jié)合工作中實際案例舉一反三，更深入地探索相關(guān)內(nèi)容。在這里再次強調(diào)一下產(chǎn)品國際化方面內(nèi)容，互聯(lián)網(wǎng)信息的快速交流與傳播使得人與人的連接越來越容易，很多產(chǎn)品進入海外市場是必經(jīng)之路，大家可提前做好相關(guān)知識儲備，還是那句話也希望自己后續(xù)可以多歸納總結(jié)與大家展開探討分享。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷作者：熊細(xì)輝Neo

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(3021)

152021-10

車載智能助手設(shè)計：智能座艙的合作伙伴

ui設(shè)計分享達人

前言：

隨著科技的發(fā)展從家庭到辦公室，協(xié)作機器人(cobots)正在逐漸出現(xiàn)在我們的視野，汽車車載虛擬形象也越來越多地涌現(xiàn)，例如：蔚來的NOMI，理想的ONE，奔騰的YOMI。虛擬語音助手的形象也越來越符合大眾口味。虛擬語音助手形象通過改善用戶體驗和培養(yǎng)情感聯(lián)系來增加汽車的價值。但是我們在使用的過程中不難發(fā)現(xiàn)，機器人的設(shè)計很容易出錯，從而讓我們感到無聊、生氣，甚至更糟糕的情緒——害怕。

那么，汽車公司如何設(shè)計虛擬語音助手，才能創(chuàng)造更安全、更高效、更有回報的駕駛體驗?zāi)?

本文將通過以下幾點進行闡述，讓虛擬語音助手的設(shè)計創(chuàng)造更好的汽車體驗。

1.利用UX（用戶體驗）來驅(qū)散對人工智能的恐懼

如果在文化的進程中，高科技在其中扮演過一個壞人的角色，那么在設(shè)計時一定要謹(jǐn)慎。例如，在美國，小說作家史蒂芬·金寫過一本關(guān)于殺人汽車的恐怖小說，這會讓用戶在使用汽車的時候產(chǎn)生聯(lián)想。

谷歌公司也深知這一點，這就是為什么早在10年前，它將其早期的自動駕駛汽車Waymo設(shè)計得如此可愛，目的是為了幫助人們更適應(yīng)自動駕駛這一遙遠的概念。

undefined

史蒂芬·金恐怖小說《克里斯汀》谷歌第一輛無人駕駛汽車waymo

從另一個角度來說，創(chuàng)建一個可愛的，溫柔的，虛擬形象是為了給用戶一種優(yōu)越感，從而消除恐懼。

外形的設(shè)計固然重要，但是行為比外觀更應(yīng)該受到重視，美國時間2016年6月27日，Anki發(fā)布的玩具機器人Cozmo的產(chǎn)品，它的面部是一塊發(fā)光顯示屏（OLED），眼睛則是隨心情變化的方塊。因為外形相似，Cozmo被認(rèn)為是皮克斯動漫《機器人總動員》中瓦力（WALL-E）的現(xiàn)實版?？雌饋肀容^呆萌，給人一種畜類無害的感受。并且通過笨拙的行為，展現(xiàn)出它呆萌的性格，大大降低了人們得戒備心理。

呆萌的機器人Cozmo

以黑綠色代表邪惡的斯萊特林學(xué)院黑綠色的Cozmo

因此即使用了一些比較可怕的顏色，例如，黑綠色。你也不會產(chǎn)生恐懼的心里。由此可見，行為遠比外觀給用戶帶來的感受更具有說服力，也更加直觀。

當(dāng)我們在設(shè)計語音虛擬助手時也是一樣，無論是作為一個合作機器人，還是車輛本身，要問問自己，我想展現(xiàn)的AI是什么樣子的，這樣你就可以在它跨屏幕遷移時設(shè)計一個有凝聚力的體驗。

總結(jié)：虛擬語音助手的形象要降低用戶的恐懼感，適當(dāng)?shù)臑橛脩粼黾觾?yōu)越感。

2.不要越界

Jibo是一款設(shè)計來幫助你在家工作的合作機器人，由 MIT 科學(xué)家 Cynthia Breazeal 制造。它高約28cm，重約六鎊，無法自由移動，擁有電子眼睛、耳朵和聲音，頭部可以 360 度旋轉(zhuǎn)并進行聲音定位，能夠講故事、聊天和提供安慰，也可以拍照和做日程提醒。但可惜的是它失敗了，因為它承諾太多，更注重情感而不是功能，比如語音和人臉識別上存在一定的誤差，并沒有宣傳視頻里演示的那么生動；智能家居中控方面，因為要通過第三方平臺實現(xiàn)控制，實際體驗并不流暢；又比如，因為起初內(nèi)容缺乏、功能未得到完善，Jibo 無法看視頻、玩游戲和視頻通話，除了擠眉弄眼之外，屏幕成了擺設(shè)。

簡單來說就是它能做的事兒和它899美元的售價不匹配，自然就沒有用戶愿意為他買單。

經(jīng)營失敗而倒閉的機器人JIBO

Qoobo是一款帶尾巴的靠墊，可以通過擺動尾巴來安慰用戶，雖然看起來也沒有特別智能，但它之所以能夠成功的原因是因為它的功能和價格合理。在滿足基本需求時，“搖尾巴”的功能可謂是“錦上添花”。

深受用戶喜愛的坐墊機器人Qoobo

在車載中也是如此，比如蔚來的NOMI,經(jīng)常有用戶反饋，nomi有的時候所問非所答，要喊出指定的關(guān)鍵詞才可以做出相應(yīng)的應(yīng)答，但是它能夠成功的原因是，它們能增加真正的價值，并在受控的環(huán)境中運營，在那里人工智能可以成為“領(lǐng)域的老板”。同樣的在設(shè)計虛擬語音助手形象時，需要有一個明確的目的，那就是它能做什么，不能做什么。換句話說就是：在不影響我駕駛的前提下，幫助我完成一些額外的工作。

總結(jié)：要使虛擬語音助手成為功能清晰的服務(wù)生態(tài)系統(tǒng)的一部分，滿足用戶的基本需求。

3.展現(xiàn)它作為助手功能性的一面。

恐怖谷理論是一個關(guān)于人類對機器人和非人類物體的感覺的假設(shè)，它在1970年由日本機器人專家森昌弘提出，虛擬形象或機器人的仿真度越高人們越有好感，但在相似度臨近100%前，這種好感度會突然降低，因為你無法分辨某物是否是人類，這會讓用戶產(chǎn)生不安的心理。雖然車內(nèi)人工智能顯然不是人，但我們確實要避免這個令人毛骨悚然的情況發(fā)生。在贏得用戶的信任并建立聯(lián)系的同時，也需要讓用戶知道你的界限，并對數(shù)據(jù)的收集和使用保持透明。

undefined

恐怖谷理論

令人恐懼的設(shè)計看完就喊媽媽的動畫

還要注意的是在設(shè)計的過程中，要區(qū)別人和人的交流以及人和虛擬語音助手的交流的交流。

機器人再說話時會說：請，你好等禮貌用語，這樣父母在使用語音助手的同時，不會擔(dān)心孩子學(xué)到一些粗魯?shù)挠谜Z

其次，我們在與功能性動物交流時，不會用人類的用語，更傾向于使用專門的動物用語。例如，在東北趕集的人，不會對馬或者驢說，往前走，不要走了。而是會說：“駕” “屢” 等擬聲詞來代替，一方面是為了快速的下達指令，另一方面就是區(qū)分人類用語言。

你可能會經(jīng)常看到這樣的新聞：某演員入戲太深，走不出自己的角色，導(dǎo)致發(fā)生抑郁，帶來糟糕的結(jié)果。這就是用戶對角色情感的過度投入，導(dǎo)致無法區(qū)分現(xiàn)實世界和角色世界。因此語言另一個用處就是：防止用戶入戲太深。

總結(jié)：保持和突出語音助手該有的特征，這樣可以讓用戶更加容易走出和進入使用場景。

4.扮演它該有的角色

paro這是一個海豹幼崽的形象，這種機器人有助于癡呆癥患者的護理。通過肢體接觸，可以喚醒癡呆癥患者過去養(yǎng)育子女、飼養(yǎng)寵物的記憶。它的感光裝置能分辨白天和黑夜，它的位置感受裝置可以判斷自己是處于被抱著，還是處于跟主人相對的狀態(tài)。它在充電時用一個奶瓶，這和他“被扶養(yǎng)”的定位相吻合。

代替動物為老人治療的Paro

undefined

正在充電的Paro

寵物機器人Lovot，當(dāng)你決定要收養(yǎng)它們時，也要意識到它們每天半個小時鬧騰，還有那被“關(guān)愛”需求，真的也許會讓你累覺不愛卻又割舍不了，感嘆自己為什么要“養(yǎng)”這兩個小鬼。讓我們感受到，這些機器人就像人一樣，它也有嬰兒期，需要我們耐心教導(dǎo)。

寵物機器人Lovot

再比如馬里奧在最早的出道作品《大金剛》中，馬里奧被設(shè)定為一名普通的美籍意大利人，從他的口音(或是從他的配音演員Charles Martinet的所配的口音)來看，他的英文確確實實帶有一定的意大利口音，而且從服裝上也是典型的美國公民裝扮。

因此，無論是外形還是功能上都要有一定的隱喻和暗示。

總結(jié)：為所有情況尋找隱喻，這可以讓用戶有一個連貫的想法。無論在哪中場景，都要暗示和產(chǎn)品相關(guān)的特性，這樣用戶對虛擬語音助手的角色定位才會一直保持統(tǒng)一。

5.讓互動更有價值

在設(shè)計過程中，始終要貫穿的思維就是如何使虛擬形象對用戶的情感做出反饋。通過設(shè)計引起用戶情緒價值與情感體驗。比如，通過簡單應(yīng)答，或者簡單的肢體動作來達到目的。建立一個專屬于用戶的體驗設(shè)計。比如引導(dǎo)用戶給虛擬形象命名等。

總結(jié)：培養(yǎng)感情紐帶，讓用戶與虛擬語音助手建立長期關(guān)系，讓用戶對合作機器人更加滿意。

在未來幾年內(nèi)，我們預(yù)計語音人工智能的個性、年齡和性別將會多樣化，車內(nèi)語音助手將繼續(xù)被采用，尤其是隨著更多的自動駕駛功能進入市場。對于一些原始設(shè)備制造商來說，將合作機器人設(shè)計成技術(shù)的實體表現(xiàn)形式，以幫助贏得用戶的信任，這是有意義的，當(dāng)然還有其他制造商將在人機界面(HMI)中以圖形方式展示人工智能，就像Siri一樣，以較為抽象的方式表現(xiàn)出來。無論哪種形式所遵從的原則是不變的，期待大家更好的設(shè)計！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷作者：大牛李
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(1998)

152021-10

未來感設(shè)計汽車大盤點（上）

ui設(shè)計分享達人

在靈籠中，白月奎開著奧迪在滿是噬極獸的世界馳騁。小伙伴們也驚呼連連。其實，這是一款名為AI trail的奧迪概念車已經(jīng)被生產(chǎn)，預(yù)計2030年上市，那現(xiàn)實中是什么樣的呢？接下來，就從奧迪開始，為大家盤點未來感的汽車是什么樣子的吧。

1.奧迪AI trail

這也是一輛純粹的SUV。它有四個電動馬達，每個軸距上有一個，這使它具有四輪驅(qū)動能力，它在公路上的最高速度為每小時81英里，越野范圍為155英里。它的輪胎壓力可以根據(jù)地形，在移動中調(diào)整。

奧迪 AI trail外觀

當(dāng)你坐在里面，它會給出一個令人難以置信的寬廣的觀察范圍，她甚至可以讓你看到輪胎。因為里面有足夠的空間，甚至沒有任何多余的顯示器，它是完全由你的手機進行控制的。

把手機作為屏幕，從而達到更廣闊的視野

你可能已經(jīng)注意到?jīng)]有大燈，但這是因為它用于照明的燈被安裝在自主的無人機上，這些無人機會在前面飛行，為你照亮道路。當(dāng)你在光線不好的環(huán)境野營時，你可以通過折疊無人機，手電筒等照明設(shè)備。

無人機搭載照明燈

充當(dāng)照明設(shè)備的無人機

2.雷諾EZ-Go

雷諾在2018年發(fā)布了他們的電子出租車概念車easy go，同樣計劃在2030年面世。其設(shè)計理念是：在未來，汽車的所有權(quán)已經(jīng)不在是一種趨勢，當(dāng)我們需要旅行時，我們只需預(yù)約一輛自動駕駛的汽車。雷諾高層表示，網(wǎng)約車和共享移動服務(wù)將會是雷諾的主要發(fā)展方向。當(dāng)你來到一個陌生的場景，你可以透過360的窗戶來欣賞沿途的風(fēng)景。進入內(nèi)部，內(nèi)部空間可容納六名乘客，呈U型排列車頂從前面打開，提供存儲空間。并且它還有四輪轉(zhuǎn)向功能，意味著它可以在城市間輕松穿梭。當(dāng)然，作為更明顯的旅途用車，它的車速最高限制在50m/h。對于行動不方便的乘客，它有一個可伸縮的斜坡，當(dāng)你需要下車是，將自動伸向路邊，讓乘客可以更加方便的進出。

在城市穿梭的ES-Go

通過顯示器可以看到基本信息

汽車內(nèi)飾

undefined 方便進出的設(shè)計

3.terrafugia tf-x

相信小伙伴們多少在科幻電影當(dāng)中看到“會飛的汽車”，我在小的時候看過一個電影《第五元素》，依稀記得家里的七大姑八大姨，嗑著瓜子，坐在炕頭，討論著“我們有沒有機會坐上這樣的汽車”。這部這款汽車可能在不久的將來將會滿足大家的遠景。

電影《第五元素》

如果你正在尋找未來的汽車是什么樣子的，那么 terrafugia tf-x就是我們我們理想的設(shè)計。這款汽車售價 28 萬美元起，折合人民幣約為190萬左右。它擁有一雙可折疊的螺旋槳，隱藏在車機兩側(cè)。

TF-X外觀展開雙翼的TF-X

這款汽車很快就由波士頓的設(shè)計公司開發(fā)出來了，這款概念車比它最初看起來的空間要大得多，它是插電式混合動力，能夠?qū)崿F(xiàn)全自動飛行，在緊急狀態(tài)下可以手控或者遙控。在動力系統(tǒng)上采用插電式混合動力傳動系統(tǒng)，有兩個600制動馬力的電機和一個33制動馬力的燃料發(fā)動機，電腦自動控制，擁有有四個座位，可垂直起降空中續(xù)航可達640 公里，最高時速為 185 公里/小時，但是它在路上的最高速度或它的范圍還沒有被公司宣布，即它可以飛到可伸縮的翅膀上折疊出一個連接的螺旋槳的事實。

與此同時，各國的航空當(dāng)局也在討論和協(xié)商制定管理這一新興交通業(yè)的政策和安全標(biāo)準(zhǔn)。如果未來將會普及飛行汽車，那么開上飛行汽車是否需要飛行駕照？人們是否會花費超過100萬RMB來購買？

正在倒車的Terrafugia TF-X

飛行中的Terrafugia TF-X

4.雪鐵龍19_19

雪鐵龍1919確實是一款具有未來設(shè)計感的汽車，它的目的是要做到其舒適性已優(yōu)先于其他每一個元素，它的設(shè)計理念是未來航空工業(yè)。結(jié)合前擋風(fēng)和立體化的玻璃覆蓋，上半部分更像一個漂浮的太空艙。

undefined

雪鐵龍19-19外觀

它在車頂后部安裝了激光雷達探頭，主要用于在長距離行駛時的自動化駕駛。它的踏板和方向盤，是可以伸縮的。但當(dāng)駕駛者想自己駕駛時，踏板會降到合適的位置，方向盤會展開。當(dāng)用戶不想駕駛的時候，方向盤會自動縮回，智能音箱自動升起，幾乎像一個潛望鏡一樣，幫助用戶實時檢測駕駛情況，并且把信息顯示在擋風(fēng)玻璃上。 undefined

自動駕駛模式，信息在擋風(fēng)玻璃上顯示

5.輛豐田L(fēng)Q

豐田L(fēng)Q的設(shè)計原則是，讓司機和他們的車輛之間有更加緊密的聯(lián)系。所以通過加入最先進的先進的AI，稱為Yuyi，將人工智能打造成你在車內(nèi)最好的朋友之一。

會眨眼睛的LQ

它是全電動的，擁有SAE L4級自動駕駛系統(tǒng)，這意味著不需要用戶的參與，因此車廂的舒適性就顯得尤為重要。在座艙內(nèi)的乘客被不斷地監(jiān)測，AI將根據(jù)司機的情緒和警覺狀態(tài)來調(diào)整溫度，甚至是駕駛模式。并將進一步嘗試在情感上吸引司機，使他們在旅途中保持愉快的心情。車內(nèi)的每個控制都是語音激活的，這代表車內(nèi)幾乎沒有任何物理按鍵，所有的信息將會投射在擋風(fēng)玻璃上。甚至可以調(diào)整照明水平，在空氣中釋放平靜的感覺，AI也會選擇自己的音樂播放列表，喚起它認(rèn)為目前最符合你情緒的音樂。

AI根據(jù)用戶心情播放相關(guān)音樂

正在自動駕駛的LQ

6.梅塞德斯-奔馳Vision AVTR

如果你想看到世界上最有未來感和最有異國情調(diào)的輕型概念車，那么你一定要看的就是這輛車。相信小伙伴們都看過《阿凡達》這個電影，無論是科幻的劇情，還是絕美的場景，都在當(dāng)時引起了不小的轟動。這輛車的靈感就是來自《阿凡達》這部電影。而且契合度可謂是非常的高。

阿凡達場景阿凡達宣傳海報

它外觀采用了仿生設(shè)計，整體觀感十分科幻。車身兩側(cè)采用了全透明設(shè)計，意在大幅提高車內(nèi)視野，強調(diào)車內(nèi)、車外的交互。它還使用了33瓣采用了獨立的仿生襟翼，看起來像爬行動物的鱗片，可以根據(jù)不斷變化的條件來調(diào)整車輛上方的空氣流動。

《阿凡達》電影中的精靈樹

他的輪胎，借鑒了電影中，精靈樹的樣式，并且它去掉了傳統(tǒng)的圓形輪，胎取而代之的是球形輪胎，它提高了機動性，對周圍的影響較小，并且能夠扭轉(zhuǎn)30度，這意味著汽車可以以螃蟹的方式側(cè)向移動。

AVTR外觀

可以依據(jù)氣流和感應(yīng)翻轉(zhuǎn)的仿生襟翼

內(nèi)飾以流動的波浪和花朵形狀為基礎(chǔ)，這看起來是有史以來最舒適、最高效和最愉快的旅程。這輛車會與你交談，了解你想去的地方，在給它下達指示后，你需要做的就是坐下來，讓它做所有剩下的事情。值得一提的是，車內(nèi)同樣沒有任何按鍵，當(dāng)你伸出手站，并且注視手掌時，按鍵就會顯示在你的手心上，你進行移動點擊等操作。

AVTR內(nèi)飾顯示在手掌上的虛擬按鍵

通過手掌來控制方向用手掌進行交互

通過對趨勢的了解和分析，相信小伙伴們對未來感汽車有了新的認(rèn)識和理解。目的也是為了讓大家更好的把自己的理念和設(shè)計與未來汽車相貼合，亦或是產(chǎn)生靈感，發(fā)散思維，做出更好的創(chuàng)作。希望在不久的將來，無論在汽車造型，還是內(nèi)飾，或是儀表等，可以看到大家充滿激情的設(shè)計。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷作者：大牛李
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2308)

152021-10

案例分享 PM/UX 必看 [用戶體驗]

ui設(shè)計分享達人

講User Research | 用戶研究之前，有必要先介紹下“用戶體驗”。這兩者是密切關(guān)聯(lián)的。

作為一枚互聯(lián)網(wǎng)老兵，先說一下歷史吧。

N年前，UX Designer還不怎么流行。

隨著喬幫主iphone4的橫空出世，驚為天人，徹底改變了整個手機生態(tài)。于是在中國市場，各種熱錢涌入，到處都是創(chuàng)業(yè)公司（start-up），各類APP紛紛孵出（我在上海）。這是整個移動互聯(lián)網(wǎng)行業(yè)野蠻生長的年代。公司那么多了，那么UI，iOS開發(fā)，Android 開發(fā)等等都是供不應(yīng)求的。

當(dāng)然，那么多創(chuàng)業(yè)公司，90%都會在一年內(nèi)，在天使輪的階段死掉。能活下來的，都是壯士！現(xiàn)在你看看你手機上裝的啥耳熟能詳?shù)腁PP，基本也就是那些了。

題外話：我當(dāng)時的公司樓上是一家知名網(wǎng)游公司。某天我很快樂（KU B）的去上班（Make Money），結(jié)果就看到新聞?wù)f那家創(chuàng)始人CEO昨天半夜心臟病發(fā)，人沒了。隔天就看到他家公司門口貼訃告了。（此處默哀！）創(chuàng)業(yè)不易，真心能活下來的都是壯士！

野蠻生長的年代，對于崗位要求不會那么精細(xì)。做UI的，最好你什么都會，十項全能。平面/手繪/App UI/ Web UI/H5/交互/動效/前端最好也懂一些/其他。。。

那時候少有交互崗，因為交互崗?fù)ǔ划a(chǎn)品崗，或者UI崗兼了。但隨著這些年WEB/APP越來越成熟，用戶對于體驗的要求越來越高。另外，隨著各類海歸人才帶回來的國外先進設(shè)計理念。各路大中小廠對于UX交互也就越來越重視。

于是，就有了UX Design | 交互設(shè)計的專門崗位，有些也叫User Experience Design | 用戶體驗設(shè)計，在互聯(lián)網(wǎng)行業(yè)，兩者基本一個意思。

（我們這里不討論用戶體驗的五個層次，戰(zhàn)略層、結(jié)構(gòu)層、表現(xiàn)層之類的。這些太理論，大概知道就行了，多說我也困。真要硬掰，那交互設(shè)計實際算是用戶體驗中的結(jié)構(gòu)層。但在國外專業(yè)文獻中，UX Design=User Experience Design。不要硬剛。：P）

“人類總是情緒化的，總是對他們世界里的產(chǎn)品做出情緒化的反應(yīng)”

-艾倫·庫珀，Cooper公司總裁，Visual Basic之父

一．什么是 User Experience | 用戶體驗？

通常來說，“用戶體驗”就是人們在使用產(chǎn)品時候的感受。用戶體驗并不僅限于互聯(lián)網(wǎng)行業(yè)，各行各業(yè)都有。

用戶體驗更關(guān)注的是人和物的交互(Human-Objects Interaction)之間的聯(lián)系。

“物”在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用可以是Web，APP，System等。

舉個生活中的例子，迪斯尼。

迪斯尼，娛樂行業(yè)吧？但它更是一家徹徹底底的體驗公司，極其注重體驗管理。

迪斯尼樂園為小朋友們，大朋友們筑造了一個夢。迪斯尼的體驗管理，就是從造夢這個目的出發(fā)的。

對于服務(wù)人員、演職人員的要求，干凈、禮貌都是最基本的。

迪斯尼對演員的要求是，你不是演米老鼠，你就是米老鼠。用戶體驗細(xì)致到如下：

* 只要有賓客在，演員就不能把頭套摘下。之前有新聞?wù)f演員中暑了，也堅持不取下頭套。（這里我們不討論勞工權(quán)益之類的問題）因為不能毀滅孩子們的夢。

* 在同一個視野里，不能有兩個同樣的米老鼠。因為對于孩子來說，米老鼠只有一個！

* 全世界演米老鼠的演員，都要苦練簽名。因為對于孩子來說，全世界只有一個米老鼠，簽名當(dāng)然是一摸一樣的。

這只是演員，還有其他工作人員，還有工作以外的服務(wù)。此處不再延申討論了。

二．什么是 User Experience Design | 用戶體驗設(shè)計（即UX Design | 交互設(shè)計）？

用戶體驗設(shè)計，顧名思義，就是為產(chǎn)品/服務(wù)設(shè)計一個良好的體驗。用戶體驗設(shè)計同樣并不僅限于互聯(lián)網(wǎng)行業(yè)，各行各業(yè)都有。

舉個生活中的例子，麥當(dāng)勞的打包袋設(shè)計。

傳統(tǒng)設(shè)計是這樣的。

漢堡薯條什么的全部裝紙袋，沒有提手，每次都捏到我手指抽筋。飲料再另外裝個塑料袋。

一個捏，一個提。其實是不舒服也不方便的。

用戶體驗好的設(shè)計可以是這樣的。方便快捷，節(jié)約資源，解放手指。

（gif動圖，刷新頁面重播）

我們這里想說的用戶體驗設(shè)計，特指互聯(lián)網(wǎng)行業(yè)。

早期的Web頁，幾乎就是個靜態(tài)網(wǎng)頁，就提供些信息展示。那時候用的還是asp, php, .net技術(shù)，快捷點的話有個模板套套，新聞/產(chǎn)品就能后臺維護了。

從大概2010年以后，Web就開始越來越復(fù)雜了，APP也開始越來越精細(xì)和規(guī)范了。這對于交互的要求就越來越高，需要有一個良好的用戶體驗設(shè)計。

舉個APP的例子。

淘寶最近對“確認(rèn)收貨方式”做了優(yōu)化（大致在2021.9），不知道你發(fā)現(xiàn)了嗎？

淘寶購物時，首先，在買東西付款的時候，就需要輸入第1次支付密碼。

最后，在收貨確認(rèn)時，

Before: 原來，還需要再輸入第2次支付密碼。

Now: 現(xiàn)在，只需要點擊“確認(rèn)”就行了，不需要再輸入一次支付密碼了。此次優(yōu)化，就是簡化用戶的操作，提升用戶體驗。

如下圖為最新優(yōu)化后的截圖：

如圖，

Before: 原來，在Step 3中，原來還需要再輸入第2次密碼。

Now：現(xiàn)在，在Setp3中，直接從Setp3——>Setp4.

三．為什么UX Design | 交互設(shè)計很重要呢？

產(chǎn)品成功與否，涉及到太多方面了。戰(zhàn)略決策、產(chǎn)品、內(nèi)容、用戶體驗、技術(shù)、運營、服務(wù)、競品情況，資金投入、運氣等等，缺一不可。而用戶體驗/交互是其中重要的一環(huán)。

專注于用戶的交互設(shè)計，大大增加了項目成功的機會。因為產(chǎn)品是給人用的，尤其是互聯(lián)網(wǎng)產(chǎn)品，用戶不會因為產(chǎn)品是知名品牌，就堅定不移的支持它，買它，用它。

要是產(chǎn)品不好用，那放棄它，也是遲早的事情了。

畢竟，能讓大家都喜愛的，還不管怎么樣都愛到死的，也只有RMB人民幣了。

四．什么是 UX Designer | 交互設(shè)計師？

交互設(shè)計師，需要通過調(diào)查和分析等用戶研究方法來設(shè)計產(chǎn)品，或者對產(chǎn)品做優(yōu)化改進，以保證用戶能有一個良好的用戶體驗。

五．UX 和UI的區(qū)別？

UI，純粹的UI，通俗來說，就是負(fù)責(zé)好看。把產(chǎn)品做好看了，做精致了，讓用戶看得賞心悅目，心情舒暢。這是美學(xué)意義上的工作。

UX，通俗來說，就是負(fù)責(zé)好用。讓整個產(chǎn)品流程簡單又便利，用戶使用產(chǎn)品不會有停頓和疑問，讓用戶使用產(chǎn)品的感受非常好。最終目的是為了增加用戶的粘性，提高產(chǎn)品的流量，促進產(chǎn)品的轉(zhuǎn)化率，為公司帶來直接或間接的收益增長。

UX是產(chǎn)品中的重要一環(huán)。

當(dāng)然，在實際工作中，如果產(chǎn)品——長得好看+體驗好。那就是王者~

這也應(yīng)該是做產(chǎn)品的要求和標(biāo)準(zhǔn)，也應(yīng)該是設(shè)計師對自己的要求和標(biāo)準(zhǔn)。

舉個兩者結(jié)合的例子，摩拜單車。

（雖然他欠用戶押金，雖然他已經(jīng)沒了，成為了美團單車。但是他的故事還是可以講一講的）

設(shè)計方面，

摩拜單車的聯(lián)合創(chuàng)始人王曉峰（負(fù)責(zé)具體的研發(fā)、運營及市場工作）回憶當(dāng)年做摩拜單車的時候，首先考慮的是產(chǎn)品和服務(wù)要讓消費者有面子。

前期他做了很多市場調(diào)研（看，用戶研究），當(dāng)年在校園外騎車的只有三種：除了專業(yè)騎賽車的，就是藍領(lǐng)工人和老年人。

想讓白領(lǐng)階層都愿意騎自行車，就必須要讓他們覺得有面子。如果讓一個白領(lǐng)，騎著五花八門，甚至還叮當(dāng)帶響的自行車上路，那是很沒面子的，這種生意一定會失敗。

于是，摩拜就設(shè)計出一輛金屬感十足的橙色自行車，好看又酷炫。

用戶體驗方面，

摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑，比如車身結(jié)實、開鎖方便、損壞率低。但是，在夸贊的后面，用戶們往往會補刀:「好是好，就是太重了?！梗ǖ谝淮亓繛?5公斤，是普通自行車重量的2倍。）

于是，為了改善用戶體驗（看，基于用戶反饋。又是用戶研究。），第二代摩拜單車在確保安全和耐用的前提下對每個零件減重，整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。

這還僅僅是車身重量，其他各方面，輪胎，鎖，鏈條，車座等等，全部做了優(yōu)化改進。此處不再延申討論。

回到做WEB或者APP的設(shè)計上。

中國的互聯(lián)網(wǎng)行業(yè)并不羞于抄襲對手，現(xiàn)在產(chǎn)品同質(zhì)化這么嚴(yán)重，靠單純的產(chǎn)品創(chuàng)意早已經(jīng)無法取勝了。

現(xiàn)在產(chǎn)品更多的核心優(yōu)勢是ABC——人工智能（AI）、大數(shù)據(jù)（BIG DATA）和云計算（CLOUD）。我們頂尖的算法工程師們（Data Scientist）好不容易對數(shù)據(jù)做了識別、分析和精準(zhǔn)有效的輸出。

結(jié)果在交互這一環(huán)沒做好，用戶找不到，看不懂，不會用這些產(chǎn)品/內(nèi)容。你做設(shè)計的良心會不會痛？

六．用戶體驗設(shè)計就是需要“以用戶為中心”（user-centered）而設(shè)計

不要拍腦袋決定，不要自己YY。

不然只能設(shè)計出一個你自己想要的，或者是你老板想要的產(chǎn)品。

舉個反面案例：生活中的例子，廁所標(biāo)識。

用戶體驗—— 正常

這張圖，好理解吧，廁所標(biāo)志。就算右邊那個清朝的個性了點，那也是設(shè)計得不錯，能看懂。

用戶體驗—— 差

這張圖，額。雞？讓我想想，哪個是公雞，哪個是母雞？只要我努力辨認(rèn)，我還是有機會成功上廁所的。

用戶體驗—— 極品差

這就是設(shè)計師自己YY的結(jié)果。

這張圖，這都是什么玩意兒？大象？長頸鹿？什么意思？設(shè)計師，你給我出來，你信不信我打不死你？

這樣的廁所標(biāo)志，我猜都猜不出來，我只能跑到廁所門口張望，當(dāng)個女流氓，看看廁所里的坑位是什么樣的，我才有指望上廁所。

好了，那位設(shè)計師現(xiàn)身說法了，他的靈感源于動物習(xí)慣，大家弄不清楚的原因是他們不了解動物的具體習(xí)性。

長頸鹿在噓噓時會張開雙腿，這標(biāo)志著女廁所，而大象則用象鼻噴水，這標(biāo)志著男廁所。他的靈感在大部分人看來太牽強，因為一般人對于這些動物習(xí)慣一無所知，用大象和長頸鹿來分辨廁所之間的區(qū)別是不是很無語？

這設(shè)計師就光顧自己玩創(chuàng)意了，自己YY。廁所是為了給大家?guī)矸奖愕?，好的設(shè)計創(chuàng)意是一回事，但最大的問題也是要方便眾人使用的。

舉個正面案例：APP的例子， AR（增強現(xiàn)實）。

現(xiàn)在AR技術(shù)已經(jīng)相對成熟了，導(dǎo)航，家居，翻譯，試妝，試鞋，地球儀都有AR。

拿AR試鞋舉例子。

Before: N年前，AR試鞋還是把鞋子投到地面上，看個大致效果。（左側(cè)Before截圖大概是我3年前截的）

Now: 現(xiàn)在，AR技術(shù)做強了，AR試鞋就直接投到腳上，能夠看到鞋子上腳的效果。對用戶而言，體驗更好。對商家而言，轉(zhuǎn)化率會更高。

好了，用戶體驗就講到這了，是不是很輕松，看看故事就有些體會了？

最后，

今年是喬幫主逝世10周年，緬懷下！原來，他已經(jīng)離開這么久了。

I skate to where the puck is going to be, not where it has been.

- Wayne Douglas Gretzky

這句話簡單來說，就是預(yù)判形勢，提前準(zhǔn)備。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷作者：Lu傾傾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(1909)

首頁

什么是異步？

什么時候用異步編程

回調(diào)函數(shù)

Promise 的使用

.then() .catch() 和 .finally() 三個方法

01 作用域:使用范圍

全局變量:

局部變量:

作用域鏈

03 函數(shù)案例

求2個數(shù)中的最大值

求3個數(shù)中的最大值

通過函數(shù)實現(xiàn)數(shù)組反轉(zhuǎn)

通過函數(shù)實現(xiàn)冒泡排序

求一個數(shù)字的階乘

求斐波那契數(shù)列

02 函數(shù)作為參數(shù)使用

04 arguments

計算n個數(shù)字的和

05 預(yù)解析:提前解析代碼

函數(shù)的聲明提升到作用域

把變量的聲明提前

01.前言

02.事勢之流 相激使然

03.找到“人物個性” 明確品牌價值

04.發(fā)掘用戶感知 拆解用戶認(rèn)知

05.體驗戰(zhàn)略建立有價值的連接

06.總結(jié)

差異化圓角層疊布局

打破常規(guī)的圖標(biāo)

彌散光感漸變背景

一、問題求解

二、邏輯推理與定理證明

三、自然語言理解

四、自動程序設(shè)計

五、專家系統(tǒng)

六、機器學(xué)習(xí)

七、神經(jīng)網(wǎng)絡(luò)

八、模式識別

九、機器視覺

十、智能控制

內(nèi)容概覽

網(wǎng)頁字體應(yīng)用發(fā)展

1、網(wǎng)頁排版初期

2、自定義字體庫“Typekit”

3、可變字體

網(wǎng)頁中的字體

1、字體工具推薦

1.1 Adobe Font

1.2 Google Fonts

1.3 求字體網(wǎng)

1.4 字由

2、如何定義系統(tǒng)“字族”

3、如何定義字體規(guī)范

3.1 定義默認(rèn)字體大小

3.2 行寬

3.3 行高

網(wǎng)頁中版式原理

1、視覺層級

2 格式塔定律

2.1 接近定律

2.2 相似定律

2.3 小結(jié)

適配多語言切換

1、預(yù)留出足夠的文字空間

2、書寫順序

3、匹配不同行高

4、避免組件與文本混排

5、小結(jié)

寫在最后

分類

日歷

鏈接

個人資料

存檔

02.事勢之流相激使然

04.發(fā)掘用戶感知拆解用戶認(rèn)知

二、邏輯推理與定理證明

三、自然語言理解

五、專家系統(tǒng)

六、機器學(xué)習(xí)

八、模式識別

九、機器視覺

十、智能控制

2、自定義字體庫“Typekit”

3、可變字體

1、字體工具推薦

2、如何定義系統(tǒng)“字族”

3、如何定義字體規(guī)范

1、視覺層級

1、預(yù)留出足夠的文字空間

2、書寫順序

3、匹配不同行高

4、避免組件與文本混排

5、小結(jié)