<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

182021-10

如何把握好平面設計中的節奏感？

資深UI設計者

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

如何把握好平面設計中的節奏感？來看高手的分析！

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2759)

182021-10

JavaScript——異步操作以及Promise 的使用

什么是異步？

異步與同步是相反的

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

什么時候用異步編程

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

現在有一個按鈕，如果我們設置它的 onclick 事件為一個死循環，那么當這個按鈕按下，整個網頁將失去響應。

為了解決類似這種問題，JavaScript 中的異步操作函數往往通過回調函數來實現異步任務的結果處理。

回調函數

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

例如：




    

        

            

            

        

        

            
                <!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>回調</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button>點擊</button>
            

        

    

    

        

            

            

        

        

            
                <p></p>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                function fn1(){
            

        

    

    

        

            

            

        

        

            
                btn.onclick = function(){
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                setTimeout(fn1,1000)
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

它的第一個參數是個回調函數，第二個參數是毫秒數，這個函數執行之后會產生一個子線程，子線程會等待 1 秒，然后執行回調函數 "fn1"，在命令行輸出 "我出現了！"。

Promise 的使用

語法格式：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log("Run");
            

        

    

    

        

            

            

        

        

            
                });

resolve和reject是參數

再看這個例子：




    

        

            

            

        

        

            
                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");
            

        

    

    

        

            

            

        

        

            
                });

這段打印結果為：

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

這三個方法的參數都是一個函數，

.then() 可以將參數中的函數添加到當前 Promise 的正常執行序列，

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

.finally() 是在 Promise 執行的最后一定會執行的序列。 .then() 傳入的函數會按順序依次執行，有任何異常都會直接跳到 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);
            

        

    

    

        

            

            

        

        

            
                });

打印結果為：

1111
2222
3333
An error

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

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

但是請注意以下兩點：

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

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

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

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2177)

182021-10

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

本文重點

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

01 作用域:使用范圍

全局變量:

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

局部變量:

在函數內部定義的變量,是局部變量,外面不能使用
局部作用域:局部變量的使用范圍

注意:

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

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

隱式全局變量:聲明的變量沒有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();//這個函數結束之后 { 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 函數案例

求2個數中的最大值

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

求3個數中的最大值

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

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

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

 function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //說明有一個數字整除了，就沒有必要向后繼續整除了， //此時就已經驗證出不是質數 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){  //說明有一個數字整除了,就沒有必要向后繼續整除了,此時就已經驗證出不是質數 return false;  } } return true;  } console.log(isPrimeNumber(8)?"是質數":"不是質數");   var result=isPrimeNumber(2);  if(result){  console.log("這個數字是質數");  }else{  console.log("這個數字不是質數");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88))

通過函數實現數組反轉

 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]));

通過函數實現冒泡排序

 function sortArray(arr) {  //控制比較的輪數 for (var i = 0; i < arr.length - 1; i++) {  //控制每一輪的比較次數 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]));

求一個數字的階乘

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

求斐波那契數列

 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 函數作為參數使用

函數是有數據類型,數據類型:是function類型的

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

function sayHi(fn) {   console.log("GOOD");  fn();//fn此時應該是一個函數}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個數字的和

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

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

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

05 預解析:提前解析代碼

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

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

函數的聲明也會被提前—提前到當前所在的作用域的最上面

函數調用的時候, 把會函數的聲明提升到作用域的上面

函數的聲明提升到作用域

 f1();//調用  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();//報錯

注意：預解析中,變量的提升,只會在當前的作用域中提升,提前到當前的作用域的最上面

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

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

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

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

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

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

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(1860)

182021-10

體驗設計構建品牌價值-打造影響用戶心智的價值連接

01.前言

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

a

02.事勢之流相激使然

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

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

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

d

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

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

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

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

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

強調產品價值：我們結合用戶的基礎需求，根據需求內容定義“真實”內容，例如：真實的薪資、真實的工作環境、真實的工作內容等，第二步則是通過產品底層邏輯或用戶的評價反饋系統來創建這些“真實”。

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

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

f

04.發掘用戶感知拆解用戶認知

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

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

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

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

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

創造價值不是目的，只有將價值有效的傳遞給用戶，用戶通過感受價值，從而更好的理解和使用產品。我們通過感知+認知的方式重新構建用戶體驗。

結合用戶對直接/間接競品的場景舉例我們可以發現，用戶對價值感知可以分為四個維度：

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

功能體驗：“功能”類似于服務，例如：7天無理由、簡歷優化。

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

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

同時我們發現用戶認知的“真實”與以下幾個詞有很高的相關性。

接著我們根據價值體系的目標，通過以上四個維度拆解具體的優化內容（如下圖）。

05.體驗戰略建立有價值的連接

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

打造產品體驗：

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

打造服務體驗：

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

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

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

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

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

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

同樣在后續的微聊頁面我們也加入了“安全投”的提示，并且在用戶投遞后會再次與他確認我們為他提供了哪些安全保障服務，進一步延伸用戶后續的操作流程。

06.總結

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

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

作者：環鐵藝術家

轉載請注明：學UI網》體驗設計構建品牌價值-打造影響用戶心智的價值連接

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2139)

182021-10

這些細節創新，大廠設計師都不一定全知道！

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

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

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

雖然現在UI趨于模式化設計，但是我們在確保體驗最優的同時時，還是可以做一些創新設計。比如布局、圖標、色彩、質感、雜志化等方向發力，下面我們來看看如何做一些差異化設計。

差異化圓角層疊布局

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

例如上圖，我們將卡片圓角化與底部地圖相呼應，整個設計看上去就有了細微縱深感。如果上下滑動時，再配上視差動態效果，那么細節也會更豐富。

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

再來看一些優秀案例

圓角化布局設計在功能詳情頁的應用。

半圓角化布局設計的應用案例，只有一個邊用圓角來布局設計，另外一邊直角布局。

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

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

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

打破常規的圖標

圖標可以說在設計中非常重要，承載著品牌性格傳遞，表達產品的氣質，但也是我們最容易忽略的地方。

如果纖細的圖標看膩了，是不是可以嘗試下這種粗線性圖標。

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

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

Naver

圖標與品牌色集合，這種雖然現在應用較多，但是可以從不同角度來切入。比如上圖中使用填充品牌色與斷線集合，形成一種不一樣的設計思路。

最后一種思路圖標進行品牌化設計，整套圖標延續品牌DNA特征。

上圖app設計，里面圖標就是將品牌DNA符號延續到整套系統里面，包括底部bar的功能圖標和表情符號等。

彌散光感漸變背景

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

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

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

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

作者：功夫UX

轉載請注明：學UI網》這些細節創新，大廠設計師都不一定全知道！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(1937)

172021-10

人工智能的十大技術及應用

資深UI設計者

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

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

人工智能從誕生以來，其理論和技術日益成熟，應用領域也不斷擴大，接下來我將給大家介紹下人工智能的十大技術及其相關應用。

一、問題求解

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

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

二、邏輯推理與定理證明

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

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

三、自然語言理解

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

四、自動程序設計

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

五、專家系統

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

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

六、機器學習

學習是人類智能的主要標志和獲得知識的基本手段。香克(R.Shank)認為：

一臺計算機若不會學習，就不能稱為具有智能的。

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

七、神經網絡

人腦是一個功能特別強大、結構異常復雜的信息處理系統，其基礎是神經元及其互聯關系。對人腦神經元和人工神經網絡的研究，可能創造出新一代人工智能機器。

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

目前，神經網網絡已在模式識別、圖像處理、組合優化、自動控制、信息處理、機器人學和工智能其他領域獲得日益廣泛的應用。

八、模式識別

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

九、機器視覺

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

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

十、智能控制

智能控制是一類不需要(或需要盡可能少的)人的干預就能夠獨立地驅動智能機器實現其目標的自動控制，是自動控制的高級階段。1965年，傅京孫首先提出把人工智能的啟發式推理規則用于學習控制系統。十多年后，建立實用智能控制系統的技術逐漸成熟。

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

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

文章來源：人人都是產品經理作者：汪仔2461

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(8369)

172021-10

中臺系統基礎知識-文字規范系統

資深UI設計者

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

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

內容概覽

網頁字體應用發展

1、網頁排版初期

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

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

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

2、自定義字體庫“Typekit”

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

直到2009年Jeff Veen離開了Google并且同一年創立了字體在線服務Typekit，極大的豐富了設計們的字體選擇。2011年Adobe收購Typekit（也就是現在Adobe Fonts），并且Jeff Veen也因此成為Adobe產品的副總裁，負責Creative Cloud業務，負責Adobe旗下幾乎所有產品的在線體驗。

3、可變字體

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

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

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

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

網頁中的字體

1、字體工具推薦

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

1.1 Adobe Font

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

1.2 Google Fonts

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

1.3 求字體網

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

1.4 字由

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

2、如何定義系統“字族”

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

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

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

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

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

3、如何定義字體規范

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

3.1 定義默認字體大小

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

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

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

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

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

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

3.2 行寬

行寬是指一行字的長度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結構分析，人在閱讀文字的時候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運動。行寬越長，眼睛移動的距離太長太多。寬度較大，眼動位移較大，讀者閱讀換行時容易串行。行寬越短，眼睛閱讀折行的次數太多。行數較多，眼動跳躍次數多，讀者閱讀行時會感覺到文字不連續。”所以在操作界面中避免過長、行數較多的文字，閱讀是大腦活動中一種最復雜的過程，比如說在操作系統中界面操作較復雜，如果出現大段的文字用戶不僅要操作復雜的系統，還需要進行閱讀理解大大降低了用戶的使用效率。

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

3.3 行高

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

網頁中版式原理

1、視覺層級

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

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

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

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

2 格式塔定律

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

格式塔（Gestalt）這個術語來自德語單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：“整體不是元素基因的總和”。官網概括：“在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。在用戶打開界面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。

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

2.1 接近定律

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

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

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

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

2.2 相似定律

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

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

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

2.3 小結

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

適配多語言切換

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

1、預留出足夠的文字空間

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

2、書寫順序

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

3、匹配不同行高

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

4、避免組件與文本混排

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

5、小結

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

寫在最后

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

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

文章來源：站酷作者：熊細輝Neo

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(3050)

152021-10

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

ui設計分享達人

前言：

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

那么，汽車公司如何設計虛擬語音助手，才能創造更安全、更高效、更有回報的駕駛體驗呢?

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

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

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

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

undefined

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

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

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

呆萌的機器人Cozmo

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

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

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

總結：虛擬語音助手的形象要降低用戶的恐懼感，適當的為用戶增加優越感。

2.不要越界

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

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

經營失敗而倒閉的機器人JIBO

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

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

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

總結：要使虛擬語音助手成為功能清晰的服務生態系統的一部分，滿足用戶的基本需求。

3.展現它作為助手功能性的一面。

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

undefined

恐怖谷理論

令人恐懼的設計看完就喊媽媽的動畫

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

機器人再說話時會說：請，你好等禮貌用語，這樣父母在使用語音助手的同時，不會擔心孩子學到一些粗魯的用語

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

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

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

4.扮演它該有的角色

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

代替動物為老人治療的Paro

undefined

正在充電的Paro

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

寵物機器人Lovot

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

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

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

5.讓互動更有價值

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

總結：培養感情紐帶，讓用戶與虛擬語音助手建立長期關系，讓用戶對合作機器人更加滿意。

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

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2031)

152021-10

未來感設計汽車大盤點（上）

ui設計分享達人

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

1.奧迪AI trail

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

奧迪 AI trail外觀

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

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

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

無人機搭載照明燈

充當照明設備的無人機

2.雷諾EZ-Go

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

在城市穿梭的ES-Go

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

汽車內飾

undefined 方便進出的設計

3.terrafugia tf-x

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

電影《第五元素》

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

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

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

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

正在倒車的Terrafugia TF-X

飛行中的Terrafugia TF-X

4.雪鐵龍19_19

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

undefined

雪鐵龍19-19外觀

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

自動駕駛模式，信息在擋風玻璃上顯示

5.輛豐田LQ

豐田LQ的設計原則是，讓司機和他們的車輛之間有更加緊密的聯系。所以通過加入最先進的先進的AI，稱為Yuyi，將人工智能打造成你在車內最好的朋友之一。

會眨眼睛的LQ

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

AI根據用戶心情播放相關音樂

正在自動駕駛的LQ

6.梅塞德斯-奔馳Vision AVTR

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

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

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

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

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

AVTR外觀

可以依據氣流和感應翻轉的仿生襟翼

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

AVTR內飾顯示在手掌上的虛擬按鍵

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

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

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2338)

152021-10

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

ui設計分享達人

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

作為一枚互聯網老兵，先說一下歷史吧。

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

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

當然，那么多創業公司，90%都會在一年內，在天使輪的階段死掉。能活下來的，都是壯士！現在你看看你手機上裝的啥耳熟能詳的APP，基本也就是那些了。

題外話：我當時的公司樓上是一家知名網游公司。某天我很快樂（KU B）的去上班（Make Money），結果就看到新聞說那家創始人CEO昨天半夜心臟病發，人沒了。隔天就看到他家公司門口貼訃告了。（此處默哀?。﹦摌I不易，真心能活下來的都是壯士！

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

那時候少有交互崗，因為交互崗通常會被產品崗，或者UI崗兼了。但隨著這些年WEB/APP越來越成熟，用戶對于體驗的要求越來越高。另外，隨著各類海歸人才帶回來的國外先進設計理念。各路大中小廠對于UX交互也就越來越重視。

于是，就有了UX Design | 交互設計的專門崗位，有些也叫User Experience Design | 用戶體驗設計，在互聯網行業，兩者基本一個意思。

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

“人類總是情緒化的，總是對他們世界里的產品做出情緒化的反應”

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

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

通常來說，“用戶體驗”就是人們在使用產品時候的感受。用戶體驗并不僅限于互聯網行業，各行各業都有。

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

“物”在互聯網產品中的應用可以是Web，APP，System等。

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

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

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

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

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

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

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

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

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

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

用戶體驗設計，顧名思義，就是為產品/服務設計一個良好的體驗。用戶體驗設計同樣并不僅限于互聯網行業，各行各業都有。

舉個生活中的例子，麥當勞的打包袋設計。

傳統設計是這樣的。

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

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

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

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

我們這里想說的用戶體驗設計，特指互聯網行業。

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

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

舉個APP的例子。

淘寶最近對“確認收貨方式”做了優化（大致在2021.9），不知道你發現了嗎？

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

最后，在收貨確認時，

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

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

如下圖為最新優化后的截圖：

如圖，

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

Now：現在，在Setp3中，直接從Setp3——>Setp4.

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

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

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

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

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

四．什么是 UX Designer | 交互設計師？

交互設計師，需要通過調查和分析等用戶研究方法來設計產品，或者對產品做優化改進，以保證用戶能有一個良好的用戶體驗。

五．UX 和UI的區別？

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

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

UX是產品中的重要一環。

當然，在實際工作中，如果產品——長得好看+體驗好。那就是王者~

這也應該是做產品的要求和標準，也應該是設計師對自己的要求和標準。

舉個兩者結合的例子，摩拜單車。

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

設計方面，

摩拜單車的聯合創始人王曉峰（負責具體的研發、運營及市場工作）回憶當年做摩拜單車的時候，首先考慮的是產品和服務要讓消費者有面子。

前期他做了很多市場調研（看，用戶研究），當年在校園外騎車的只有三種：除了專業騎賽車的，就是藍領工人和老年人。

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

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

用戶體驗方面，

摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑，比如車身結實、開鎖方便、損壞率低。但是，在夸贊的后面，用戶們往往會補刀:「好是好，就是太重了。」（第一代重量為25公斤，是普通自行車重量的2倍。）

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

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

回到做WEB或者APP的設計上。

中國的互聯網行業并不羞于抄襲對手，現在產品同質化這么嚴重，靠單純的產品創意早已經無法取勝了。

現在產品更多的核心優勢是ABC——人工智能（AI）、大數據（BIG DATA）和云計算（CLOUD）。我們頂尖的算法工程師們（Data Scientist）好不容易對數據做了識別、分析和精準有效的輸出。

結果在交互這一環沒做好，用戶找不到，看不懂，不會用這些產品/內容。你做設計的良心會不會痛？

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

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

不然只能設計出一個你自己想要的，或者是你老板想要的產品。

舉個反面案例：生活中的例子，廁所標識。

用戶體驗—— 正常

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

用戶體驗—— 差

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

用戶體驗—— 極品差

這就是設計師自己YY的結果。

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

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

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

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

這設計師就光顧自己玩創意了，自己YY。廁所是為了給大家帶來方便的，好的設計創意是一回事，但最大的問題也是要方便眾人使用的。

舉個正面案例：APP的例子， AR（增強現實）。

現在AR技術已經相對成熟了，導航，家居，翻譯，試妝，試鞋，地球儀都有AR。

拿AR試鞋舉例子。

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

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

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

最后，

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

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

- Wayne Douglas Gretzky

這句話簡單來說，就是預判形勢，提前準備。

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(1940)

« 1 ... 4 5 6 ... 11 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合