<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>

          首頁

          設計師常用溝通秘籍:金字塔原理

          ui設計分享達人

          如何在很短暫的時間把你的建議和想法清晰的傳遞出去需要非常強的溝通技巧,那么今天和大家一起交流下我使用最多的一個溝通原則-金字塔原則。


          什么是金字塔原理

              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01eecb61302dcd11013f4720911215.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
          金字塔原理是由Barbara Minto創建的一種結構化思考方式,也是麥肯錫公司在用的重要工具之一。金字塔原理更多是一種邏輯呈現,很多的公司里面都會用到。也就是表達一個觀點時候,根據以下三個步驟: 
          1.首先從答案部分開始;
          2.分組并總結你的支持論點
          3.邏輯性的整理出你的支持性觀點。
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  我們一起來看看如何在平時項目和設計中運用這個原理。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <br />
              </p>
              <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
                  <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">先從事情答案開始</span> 
              </h1>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01c10a61302df711013f4720ed8c5d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  作為產品設計師,我們要以一種結構化的方式與那些忙碌的主管、領導溝通,就必須首先從高管關心的答案開始,然后列出你的論點,<strong style="outline:0px;margin:0px;padding:0px;">通過這種「自上而下」的方式表達出你的想法。</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  今天我們的很多設計師其實邏輯不太好,在產出你的設計方案和設計提案時,往往先講很多分析,分析完了講方案。然后得出結論,這個是大多數人的做法,這樣做容易出現一個問題就是:有時候如果邏輯之間沒有串聯性,很容易牛頭不對馬嘴。舉個例子,很多同學在講作品集時候,很喜歡放一堆推導的過程,什么用戶畫像,人群特點,痛點等等一堆的觀點,但是最后呈現的視覺方案往往和前面推導的過程相差甚遠。推導的方向是ABC,結果設計稿是EFG,這樣的結果就會顯得你邏輯混亂。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/014a5661302e0411013eaf7036bed4.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <strong style="outline:0px;margin:0px;padding:0px;">按照金字塔原則,我們在表達一個觀點時候-先從答案開始</strong>,當你主管提出一個問題時,你的回復應該是「我們應該做某事」,觀點非常直接明了,只有這樣,在你拋出答案后,我們才能提出對應這樣做的理由。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01393661302e1311013f47201a7a5d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  為什么我們要從先答案開始?因為今天你和你主管溝通也好,和產品或者高管溝通也好,你要最大程度上運用好你的時間,這些領導都是大忙人,他們每天的行程非常滿,沒有辦法聽你在介紹一個項目從項目背景,人群等等維度去徐徐道來。如果你前面講一堆他沒有關注的內容時候,就會變得尤其不耐煩。所以這也是為什么很多同學在設計提案時候總是讓人感覺啰嗦,因為<strong style="outline:0px;margin:0px;padding:0px;">你沒有關注到對方想要重點看到的內容,你只是在表達,你覺得好的。</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  所以為了最大限度利用你和一個領導短暫的溝通時間,你首先要做的就是拋出對于這個事情的答案和建議?;蛟S很多時候,<strong style="outline:0px;margin:0px;padding:0px;">領導可能已經心中對于這個事情已經有答案了,如果你們的觀點一致,他會快速接受你的建議,繼續到下一步,而不需要你從頭到尾講一遍。</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/0112e661302e2211013eaf70e11ab6.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  另一個很大的原因是,<strong style="outline:0px;margin:0px;padding:0px;">很多領導思考問題一般會從大局出發啊,會自上而下去思考,他們會把精力放到更高的點,他們不想太糾結于細節過程,他們在評審一個設計,或者一個產品功能時更多關注答案本身</strong>。然后再逐步了解細節,所以我們一定要學會融入這些主管思維模式。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01f6f061302e3511013eaf70e0c402.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  當你領導問你一個問題該怎么做時候?你直接丟出答案,會更加的有說服力和咨詢。而不是開始尋找理由,或者各種猶豫,因為你一上來就回答了別人問你的問題。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <br />
              </p>
              <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
                  <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">分類并總結出觀點</span> 
              </h1>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01358761302e4811013f47202f397d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  前面我們拋出了我們的答案和觀點,那么接下來我們就要分類并且說出能夠支持你結論的理由,一般我建議以3個論點去闡述,為什么是3,大家可以看看之前我寫的《設計師常用的思考秘籍:三的法則》。闡述的時候,參加會議的人或者領導自然而然的會把你的論點和想法歸納總結,同時也會更容易記住。這樣去表述觀點,會讓你整體的方案更加容易被接受。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/0129f061302e5311013f4720fb9b7d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  我們來舉個例子,你的主管問你,你覺得蘋果的設計為什么好?那么你可以先拋出答案:因為蘋果的設計很簡約,非常易用,讓用戶感覺很貼心,同時它的設計很好將商業和美完美的結合。具體的表現有三個:
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  第一個簡約,蘋果的設計非?,F代,簡單的線條,白雪的設計語言,讓蘋果系列產品非常具有識別性。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  第二點蘋果設計沒有過多裝飾性設計,每個設計都會讓你感覺很貼心,比如根據光線,自動調節屏幕,時鐘會隨著時間而變化,系統會根據時間調整顏色等等。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  第三點蘋果的設計很好的將商業價值最大化。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  那么你從上面幾個維度去和領導溝通,就能很有說服力,你上來就給出了答案,同時還分組的闡述了你的論點。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01752861302e6211013eaf70ce9e40.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  再來一個案例,比如可口可樂出了一個新的茶品牌,融合植物、茶淬取物和其他健康成分。所以他品牌設計是個綠色,假如今天你在和領導提案時候,領導問你,為什么要選擇綠色作為品牌設計?
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  你是不是可以這樣回答他:因為綠色能給人自然,環境,健康的感受,具體表現有以下三個方面:
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  1.從色相情感表中選擇綠色也是自然健康的代表,用戶會第一時間感知到。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  2.同時綠色也和新鮮環保概念能很好的結合。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  3.我們的配料也是從綠色植物里面提取的。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  當你分組并總結你的論點時候,能更容易把你想法傳遞出去,并且讓人很好的理解,邏輯性的歸納總結你的觀點。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01cdd061302e7911013f47202efda1.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  金字塔原理在做設計提案或者作品集時也非常有效,我們會經常去說產品問題有哪些,然后得出我們的設計目標ABC,然后利用金字塔原因,我們根據設計目標A得出設計方案A,根據設計目標B得出設計方案B,根據設計目標C得出設計方案C,這些方案之前有關聯關系,有互相映射的關系。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  很多同學容易在這一步出現問題,設計目標是ABC,設計方案卻是DEF,完全沒有關聯性。還記得我之前和大家分享的,<strong style="outline:0px;margin:0px;padding:0px;">今天你在闡述一個觀點時候,一般可以基于三個點去表達,第一個點一般是最主要的,根據重要程度,最重要到次要逐步呈現。</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <strong style="outline:0px;margin:0px;padding:0px;"><br style="outline:0px;margin:0px;padding:0px;" />


          金字塔原則在生活各處可用

              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/0155af61302e8e11013f4720a158d7.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  比如寫作上,很多人問我平時寫作有什么方法么,其實很簡單就是運用金字塔原理,比如我想寫一篇關于魯班取代設計師文章,那么怎么去寫:
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/019a7161302e9a11013eaf7041a5d8.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <strong style="outline:0px;margin:0px;padding:0px;">1.先拋出答案:</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  魯班不會取代設計師,取代的只是重復性的設計,設計創意和設計理念不會被取代。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <strong style="outline:0px;margin:0px;padding:0px;">2.分組并總結出支持你觀點的內容</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  比如觀點一,設計理念是機器無法去做的,設計文化,設計歷史這些有文化傳承的內容,舉例說明。觀點二,有創意是設計無法取代,比如很多創意廣告這些,這些需要大量腦洞等等。觀點三,重復性的工作會被去掉,所以設計師要把精力關注到設計創意和設計理念,設計思維層面上。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <strong style="outline:0px;margin:0px;padding:0px;">3.設計總結</strong> 
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  那么根據上面那些觀點,得出我今天文章想傳遞的三個觀點:
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  1.魯班不會取代設計師,反而會減輕設計師壓力,幫我們解決重復性設計,我們可以把精力放到更有價值的設計上去。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  2.設計師要把價值放在產品體驗上,產品問題,使用不順暢這些是設計師可以發現,機器無法發掘的,我們需要去洞察用戶,做出好的設計驅動業務。
              </p>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  3.重點多花精力在設計理念和設計創意上。
              </p>
              <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
                  <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">最后</span> 
              </h1>
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
                  <img src="https://img.zcool.cn/community/01affa61302ea911013f472023a554.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
              </p>
          了解一個事物的結構,可以幫我們反思并且發現一些問題漏洞。這也是為什么我推薦設計師一定要學會金字塔原則,因為今天 我們在做產品的過程中,首先要建立共識:我們的產品主要解決什么問題?為什么應該如何去解決,怎么判斷優先級?我們的解決思路是什么?數據上有什么問題?這些問題都需要我們去提前思考。同時金字塔能夠幫你了解更多你不知道的事情,并且得到很多設計驗證。 
              <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;line-height:32px;text-align:justify;">
                  <br />
              </p>
              <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:0px;caret-color:#333333;color:#333333;white-space:normal;font-family:-apple-system, BlinkMacSystemFont, &quot;text-align:justify;outline:0px;padding:0px;">
                  <span style="box-sizing:border-box;color:#666666;">藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。<br style="box-sizing:border-box;" />


          文章來源:站酷   作者:我們的設計日記
              <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:#525252;font-family:&quot;background-color:#FFFFFF;text-align:justify;">
                  分享此文一切功德,皆悉回向給文章原作者及眾讀者.
              </p>
              <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:#525252;font-family:&quot;letter-spacing:0.1px;background-color:#FFFFFF;text-align:justify;">
                  免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
              </p>
              <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;background-color:#FFFFFF;text-align:justify;">
                  <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height11111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.syprn.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;">藍藍設計</a>(&nbsp;<a href="http://www.syprn.cn/" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#0C386E;transition:all 0.5s ease;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.syprn.cn&nbsp;</a>)是一家專注而深入的<a href="http://www.syprn.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">界面設計公司</a>,為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.syprn.cn/bs.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">BS界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">cs界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">ipad界面設計</a><a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/baozhuang.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">包裝設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/icon.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">圖標定制&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/yhty.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">用戶體驗 、交互設計、&nbsp;</a><a href="http://www.syprn.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">網站建設</a><a href="http://www.syprn.cn/WEB.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、<a href="http://www.syprn.cn/xz.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">平面設計服務</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
              </p>
              <div style="font-size:16px;">
                  <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height11111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />




          </div>



          交互設計師該如何高效地分析問題

          ui設計分享達人

          一. 明確和理解問題

          明確和理解問題就是要看透這個問題的本質是什么,明確要解決這個問題可以用到的資源都有哪些。

          理解問題的重要步驟:1.問題痛點梳理;2.產品功能流程圖梳理;3、用戶畫像分析;4.數據分析(熱力分析、留存分析、事件流分析)


          二. 拆分問題

          拆分問題就是問題痛點的出現核心問題,拆分問題涉及的維度的關聯性拓展有哪些。

          拆分問題的重要步驟:1.用戶的核心行為路徑分析;2.功能頭腦風暴;3.解決方案的探討


          案例:配送管理的業務組件【打印交互組件重構】

          【背景】

          配送的打印功能主要服務于行政管理人員,每天對配送模塊的訂單和司機管理,進行打印操作,打印前會頻繁配置不同打印需求

          【現有問題】

          1、滿足功能上,體驗上缺乏引導,導致用戶學習成本較高;

          2、歷史包袱,隨著功能需求不停迭代,功能層級劃分混亂,導致用戶操作理解時間成本較高;

          【前期準備】

          理解問題模塊—問題的梳理:

          交互上:操作復雜,交互組件錯誤使用,體驗感差,難用

          功能上:功能臃腫,層級劃分混亂,難理解

          【理解問題模塊—功能流程圖梳理】



          【解決問題模塊—數據分析(熱力分析、留存分析、事件流分析)】


          1.熱力分析(GIO)

          配置的需求基本上30天數據反饋可以看出,沒必要進行“配置頁”為主路徑。


          這里可得出:是否存在每次打印設置的需求,為以后的交互迭代提供快捷配置的可能性。


          2.拆分問題—用戶的核心行為路徑分析:

          主路徑:查看列表——批量打印——打印完畢(80%)



          特殊:查看列表——批量打印——設置模版——打印完畢(20%)



          3.拆分問題—解決方案的探討:【核心:以人為中心 解決問題】

          交互上:操作復雜,體驗感差,難用

          功能上:功能臃腫,層級劃分混亂,難理解


          【功能層:功能梳理重組】

          【交互層:信息關聯】

          1.交互關聯性更強,現在是聯級反饋,解決點擊一級內容不知道二級內容的編輯的可視區域;

          2.功能信息更直觀,布局界面可看出功能邏輯,勾選后及時反饋,解決經常忘記勾選打印的選項;



          【方案輸出】

          方案一:配置頁的構想,假設在設置模塊有單獨承載打印配置的區塊,而當前對話框的勾選內容是便捷選項,如需要更深設置,需跳轉到打印配置區塊

          方案二:列表的打印功能添加,全局設置,與當前對話框選擇設置進行協助配置,如:列表全局的打印功能設置“不再彈出窗口”設置,點擊當前的對話框,是直接打印操作


          【可用性測試】

          采用行為觀察法。


          【迭代成果】


                 迭代前                                                                      迭代后




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

          文章來源:站酷   作者:麥海欣

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

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

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



          從視覺、交互和技術三個方面淺析2021設計趨勢

          ui設計分享達人

          一、社會背景  Social Context


          2020年因為疫情,讓協作、云端、即時通訊、遠程會議、AI智能等等,成為了遠程辦公的必需品。目前,疫情在國內已經獲得了控制,后疫情時代已經到來,許多最初沒有的習慣,在發現新的工作模式更加有效率后,也即繼續保留了下來,這些保留下來的習慣,也將在2021年會更進一步的發展。



          1.大廠的變化

          在視覺設計層面,個大設計語言陸續推出了新的設計版本,更為突出個各自設計風格,以建立自己的視覺護城河,谷歌發布了 Android 11,Apple發布了 IOS 14,微軟持續宣傳他的 Fluent UI 設計理念,在國內的辦公領域,騰訊文檔推出了類似 Fluent UI 設計理念風格,石墨文檔依舊保持獨特的東方韻味,飛書發布了飛書文檔,繼承飛書本身簡潔的 UI ,以及活潑的插畫風格。


          谷歌的 Aandroid 11 

          基于 Material Design 設計的 Android 11 ,裝飾上運用簡潔的幾何圖形,UI 細節上開始趨向圓角的運用,色彩方面選擇了更為協調的配色,對比之前版本純度有所降低,顯得更為高級。視頻鏈接:file:///Users/javascript/Desktop/0bf2miadcaaa7eamerkc6fqfaywdgfraamia.f10003.mp4


          蘋果的 IOS 14

          UI 設計延續原有的風格,清晰的字體,大圓角的運用,加上豐富的動態效果,并且新增了許多貼心的新功能,例如懸浮播放視頻、主屏幕的Widget。


          微軟的 Fluent UI

          這是微軟為跨平臺,而提出的設計解決方案。支撐設計概念的關鍵詞有深度、材質、動畫、光線等等,這聽起來感覺與 Material Densign 特別相似。不過在最終的視覺呈現上微軟會更接近于真實世界。例如,透明的毛玻璃效果,或更為立體的圖標等。


          2.社區中的熱門設計

          Behance 和 Dribbble 在2020年出現了許多以 3D 插畫為主視覺的設計方案,因為技術的發展,設計師借助 Figma 或 Dimensions 就可以輕松的創作所需的 3D 素材。關鍵的這不是設計方案中的“花瓶”,因為在Mac的最新系統 Big Sur 中,已經開始運用了 3D 的圖標,相信在以后的 3D 的運用場景將會不斷的被挖掘出來。


          2020年初時在Dribbble流行起來的一個風格叫“新擬態”,這是將投影運用到極致后出現的效果,正如作者所說的:讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣子的,這是我的愿景”。新擬態在視覺上表現確實很驚艷,為此Aandroid還制作了一個新擬態的12宣傳視頻,但是主觀感覺這應該很難廣泛運用到實際產品當中。



          二、UI設計 User Interface


          1. 設計服務與內容

          設計專注于表現內容,這是從包豪斯到現在一直遵循的規則,而這個理念也將會持續下去。設計目標終將是需要把關鍵信息傳達到用戶手中,讓用戶知道自己為什么在這,這里有什么,并且能到哪里去。


          技術的發展,形式也一直在發生變化,提升信息傳達效率,這已經不單是平面設計專屬。學會運用動效,交互或智能推薦等綜合的方法,來達到設計目標,會是將來常用的設計手法。


          2.更大的圓角


          在以前由于屏幕分辨率太低,窗口四角正常會運用直角,因為圓角會出現鋸齒或者模糊,影響界面美觀。而現如今移動屏幕質量早已超過紙媒的印刷技術,圓角也開始被廣泛的運用。另一方面圓角在之前的認知中,是兒童的專屬,是更為親和力的表現形式。而經過幾年的發展,這個偏見正在慢慢改變,因為圓角也可以做的很高大上,也能設計的很潮流。


          蘋果總是第一個吃螃蟹的公司,Mac 的最新系統 Big Sur 整體變得更加圓潤,窗口四角從以前的 10px 增加到 20px ,并且全新的控制中心也沿用了 IOS 14 的設計風格和設計布局。值得在一提的是,微軟 Win 10 的概念稿中也開始嘗試運用起了圓角。所以這個趨勢是蠻值得關注的一點。



          3.用有含義的插畫提升用戶體驗


          設計師常常會陷入形式主義,而忽略了本該表達的內容,特別是在插畫上。也許這個道理每位設計師都懂,但為何還是會前仆后繼的撲倒在自我滿足的陷阱中呢?也許原因中會有一點是,當內容過于直接表達,或者元素過于普通,就很容易讓作品變得毫無趣味,這就是矛盾所在了。


          那如果設計師既不想脫離內容,又不想設計出乏味的設計,怎么辦?這就需要讓插畫具有含義,而不是淪為純粹的形式。優秀的插畫多承載的信息量,能夠遠比文字或界面UI來的豐富。



          4. 新材料新擬態


          包豪斯有個教學目標,“培養感覺清晰,認知準確的設計師”。因此在包豪斯的基礎教學中,會讓學員研究各種材料的不同屬性。在 UI 設計當中,我們也能制作出各種各樣的材料,在擬物化的時代就能證明這一點。但在 2020 年初時,當某位設計師發現了一種新材料,并把這種材料運用到了 UI 設計當中,一時間火爆整個社區,這就是上面提到的“新擬態”。 



          這世界是充滿可能的,所以我相信在未來還會有更多的材料會被發現,或者被以新的方式使用。例如,在 2020 下半年又有一種風格開始回歸“毛玻璃”,其中我們所知道的釘釘,在釘釘 6.0 的設計概念中就融入了毛玻璃的效果。在社區中,毛玻璃也被運用到 UI 的各種場景中卡片、彈窗或圖標等。實話實說,毛玻璃的材質的確能增加許多品質感。 



          5. 自然的界面和運動效果


          這里所說的自然,是能讓人感到熟悉和安心,是以人為本的設計。王敏老師說過:“科技求真,藝術為美,設計從善,設計可以作為結點,讓真善美實現統一。”鏈接人與產品之間的紐帶是 UI 界面,它需要承載不僅是信息內容,還有用戶體驗,因此,以人為本的設計終會贏得用戶的喜愛。


          自然運動效果,不是那種大開大合的炫酷效果,而是讓界面過渡更為自然合理。想要讓界面體驗更為自然,那必然要遵循真實世界的物理規則。例如,重力、摩擦力、向心力、浮力等動態效果。



          6. 來自未來的風格


          科學技術的快速發展,讓我們感覺未來近在咫尺,但又十分迷茫不知何去何從。我相信承載UI的媒介,必然不僅僅是現在我們所使用的各種設備。VR、AR 或全息影像等技術發展,將使得UI設計會有更多的可能性。賽博朋克2077也許真的離我們不遠,那種滿世界無處不在屏讀的社會,怎樣的設計才能真正滿足需求呢?這是我們需要長期思考的問題。



          7. 深色模式


          在2020年各大廠都推出了暗色調模式,這已成了如今APP的標配。除了深色模式外,以后還會在可視性、場景和現實成本等因素方面,更近一步的打磨。




          三、插畫風格  Illustration


          1.更具裝飾性的平面插畫風格


          雖然在 2020 年不管是社區,還是實際項目,許多設計師都開始熱衷于 3D 插畫,就連蘋果微軟也不例外。但是 Google 卻繼續堅守自己的設計風格,扁平的裝飾性插畫,例如 Android 11 就運用簡單的幾何圖形進行裝飾,相關的插畫也是更多運用的扁平風格,這種堅持必然會有其重要的原因。


          裝飾性插畫在各種屏幕的適配性更廣泛,并且在繪制成本和實現成本方面也會更有優勢。在屏幕媒介還沒發生顛覆性改變前,我認為扁平的裝飾性插畫在未來將還會大放異彩。 


          2.情感化的插畫設計


          后疫情時代的遠程辦公,我們需更加考慮如何緩解合作的疏離感。如何拉近人與人之間的協作,打破遠程的空間桎梏,讓合作更具沉浸感。這時情感化的設計就能充分體現它的價值,例如,這幾年開始火的 emoji 頭像,或者各種表情包,它們讓溝通的雙方產生情感共鳴,而不是面對著冷冰冰的屏幕。


          3. 插畫的組件化與創新


          皮克斯運用技術的創新,提升了質量和效率,從而改變了整個動畫的歷史。對于我們來說,未來的插畫需求會越來越多,并且還要求獨特的創新性,這就需要有更優的解決方案。


          Ant Design 的 HiTu 在 SEE Conf 的時候提出了解放圖形化生產力,那就是將插畫各部件組件化,這有效的提升插畫效率。然而在插畫庫的維護方面,還需要設計的創新。因為效率的提升,讓設計師能有更多時間,專注于更有創造性的工作,然后將新的創意理念融入部件,最終完善整個插畫組件庫。 





          四、交互方式  IInteraction


          1. 多屏協同辦公


          凱文凱利在《必然》里討論了關于未來的生活方式,他認為我們的未來環境會充滿各種屏幕,它將會在各種事物的表面出現,屏讀會從我們起床開始到晚上睡覺,一直出現在我們視野中。如今的人們每人都有各種各樣設備,因此,多屏協同辦公是必然的趨勢,不管你是與人合作,還是獨立工作。


          萬物互聯已經是很久的話題了。在 2020 年華為的鴻蒙系統,發布了跨設備進行的分布式交互,實現了多屏協同。我感覺,這將是很重要的一步。 



          2. 秒驗身份認證


          身份認證是信息安全最關鍵的一步。我們通常會用身份 ID 加密碼進行登錄,并且為了驗證你不是機器人,還會加上人工輸入驗證碼,如果再有其他的設置選項,那我們的登錄交互就會被拉的很長,有時還會出現登錄失敗的情況。在如今浮躁的社會,許多用戶也許在前幾步就已經失去了耐心。 


          移動設備擁有有豐富的傳感器,并且精度也在逐年的提高。隨著指紋、面部、虹膜等等技術成本的降低,這些技術也開始越來越普及化。如今使用新的識別技術,很輕松就能完成各種身份認證。 




          3. 單手交互的挑戰


          當年喬幫主一直堅持的單手操作,而如今,手機屏幕逐漸越來越大,單手操作已是一種奢望。為此,各手機品牌想方設法的改變交互方式,為的就是能實現單手操作,并且為此作為宣傳的噱頭。iPhone 輕點兩下 home 鍵或向下輕滑虛擬 home 鍵,就能讓整個內容向下移動半屏,從而方便單手操作頂部功能。 


          想達到目標的第一步,就是辦法讓拇指能觸及到功能。但我們還需要進一步思考的是,拇指本身的靈活性并不高,并且也只能是單點觸控,那怎樣的交互形式能滿足日益復雜的交互需求呢? 





          4. 折疊屏

          屏幕可拓展,將會是移動辦公的重要轉折點。不管是需要長篇編輯的文字,還是畫板無限大的表格,或者是需要強大美化功能的演示,這都需要足夠大的屏幕才能有更優的體驗。折疊屏的出現讓手機能代替平板,滿足更多使用場景。折疊屏目前由于成本的原因,在大眾眼中還屬于新事物。但我相信成本在未來不會是問題,更重要的問題是,屏幕形式的變化,對于交互來說將會有哪些影響,并且如何挖掘其中真正的潛力。



          五、技術升級  Iechnology


          1. 關注隱私保護


          自 MIUI12 隱私功能發布后,APP 訪問隱私頻次大幅下降,這使得應用的行為越來越規范,也因此獲得了用戶、國家相關機構和媒體的認可。 



          在凱文·凱利的《必然》中描述了這樣的一個未來景象,我們的各種狀態將會被設備所跟蹤,大到你的地理位置,小到你的心跳,你所經歷的一切都將被上傳到網上,設備能通過對過往的分析,給你推薦各種商品或服務。這很美好,但同時也存在許多風險。在《竊聽風云》的電影情節中,就是由于先進的竊聽技術,造成了各種無法預估的災難。所以這是一把雙刃劍,在技術進步的同時,我們也需要時時刻刻關注隱私的保護。 




          2. 智能自動化辦公


          在 2019 的 Google I/O 大會上,Google Lens 展示的 AR 點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。當識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節省人工計算的時間成本。 



          在辦公場景下,如何幫助用戶減少無謂的工作,讓更多精力專注于內容。把排版規范、素材提取、文件管理、功能查找等瑣碎的事情,交給人工智能來完成。在以前工業時期有機器的賦能下,人們的生產效率進行了一次飛躍,而下次的效率提升將會是人工智能。 




          3. 腦機

          是否希望自己學會“量子閱讀法”呢?也許 5 分鐘實現十萬字快速閱讀不是夢。Neuralink 發布了 Link V0.9 版的腦機接口,并且已經在動物上進行實驗,他們通過把一塊微芯片植入猴子的大腦,然后讓其通過意念玩電子游戲。雖然這產品在人類普及的概率幾乎為零,但是這也算是人類向前邁出了一大步。 



          這只是一個開始,未來的設備將不局限于可穿戴,而會是與人體緊密相連?;蛟S可以想象一下,在未來人們會像在醫院預約掛號一樣,在科技公司樓下排隊更新升級身體里的“機械器官”。 



          4. 虛擬現實&增強現實


          如果要說接下去哪個技術變革,將對我們生活工作產生重大影響,我認為將會是 VR 和 AR。在溝通方面,體驗將會變得更為真實。遠程溝通常常效率很低,其中很重要的一點是空間的距離感,而空間的距離會產生雙方鏈接的不穩定性,因為雙方無法達成眼神、肢體等信息的交流,有時候一個眼神或者動作就能完成的事情,需要反復的語言交流,甚至會陷入各種尷尬的境地。 



          除了溝通之外,在工作、生活、學習等領域,VR 和 AR 也將會有更多可能,媒介的屬性不再是二維平面,而是三維空間,這使得它能提供更為沉浸式的交互體驗。 



          5. 5G 運用


          依稀記得上大學時 4G 時代的到來,旁邊的人都在說網速多快多快,聽歌看視頻一點都不卡。 


          而如今 5G 開始普及,網速也再次提升,但外界對其的評價褒貶不一,其中最為常見的話題就是“5G 對我們的生活將會有什么改變呢?”,有人覺得它只會提高我們每個月的話費,也有人提出 VR/AR 全景直播、高清遠程會議、無人機作業、自動駕駛等技術將會更為成熟。


          不管如此,5G 在 2020 年度過各種坎坷,最終普及到我們每個人身上。5G 對許多領域都會有質的影響,特別是依賴網絡環境的場景。其中就有辦公領域,大文件上云、協同辦公或遠程會議,5G 將會給這些場景提供更好的體驗,也會讓更多可能變為現實。 



          這篇文章是對當下的思考,也希望能對 2021 年的工作帶來些許幫助。在這過程中越是總結,越是對未來的趨勢感到迷茫,一篇文章并不能囊括所有內容,不足之處也希望理解。在未來或許會有數不盡的黑天鵝,也可能因為技術爆炸,使得新的潮流突然的興起,未來是無法預測的,所以,就讓我們一起擁抱變化吧~


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

          文章來源:站酷   作者:籃子瑤

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

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

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


          如何與利益攸關方合作進行醫療設計項目?

          ui設計分享達人

          一些有用的建議和工具幫助你與患者、醫生、醫院管理人員和其他醫療保健利益相關者一起進行設計。

          近年來,醫療保健組織開始使用“設計師”方法進行創新,以提高患者和護理人員在設計和提供醫療服務的參與度。然而,將設計方法引入醫療部門也是困難重重:思維方式的差異可能導致雙方關系緊張,同時我們仍需要提供更多的證據,證明設計實踐會給醫療保健部門帶來更多的價值。


          1.調整所有人的目標


          在處理服務設計項目時,無論是參與式還是共創式,我們需要從一開始確保所有利益相關者的目標和期望一致,以促進合作順利有效,產生有意義的成果。


          所以我們可以用到Expectation Map或者the Alignment Canvas這兩個工具可以幫助理解人類的愿景和優先排序,從而使團隊對項目的理解同步起來。


          這兩個工具在項目初期調整成員目標,構想用戶對服務的期待,建立同理心,全面地呈現了不同的觀點。


          這個工具包提供的帆布是個簡單的表格,幫助確定每個涉眾的價值和目標,突出公共點和交叉點,利用不同角色不同價值的可視化卡片填充畫布。


          建議

          -每個利益相關者可以從卡片中選擇自己的價值觀或添加價值觀,討論相同點和沖突點,制定共同目標。
          -如果項目涉及三個以上的利益相關者,可以采用相同的概念模型來反映所有價值觀和共同點。


          2.了解項目生態系統


          醫療服務中有各類行為者,行為者之間以及行為者與用戶之間存在特殊的關系。因此,我們必須清楚當前設計服務的影響人,以及影響程度。


          使用利益相關者地圖反映不同行為者的角色和責任,以便更清楚地了解你正在設計的服務生態系統。


          利益相關者地圖不僅有助于可視化服務系統和用戶體驗中的不同利益相關者,還可以可視化相關者與主要用戶的互動程度。這個模版將醫療領域的利益相關者分為三類:醫療經營者,輔助人員和大型病人群體。


          建議

          -將代表主要用戶或利益相關者的行為者卡片放在中心位置。
          -將行為者卡片按照利益相關者群體進行分類,并將卡片放在畫布的相應區域。
          -將那些與主要利益相關者互動程度較高的行為者放在內圈;除了醫療系統外,還要考慮的更廣闊的生態系統。


          3.反應不同的用戶類型


          研究項目背景,收集服務生態系統中人們的行為、動機和特點等第一手資料。構建角色有助于更好地了解設計醫療服務中的病人和醫生(或其他醫療經營者)的需求、習慣和態度。


          為了更好地促進這一階段的分析,工具包中的角色模板記錄了病人和醫生簡歷上的一些具體的醫療信息,如疾病類型和醫療知識。


          建議

          -對于病人角色,首先選擇病人和疾病類型。
          -對于醫生角色,首先選擇醫生簡歷,記錄痛點。
          -利用卡片,選擇與角色互動的環境和行為者,喜歡的互動渠道,價值觀和經歷的情感。


          4.分析經歷 構想更好的服務流程


          我們都清楚,用戶旅程是一個強大的工具,能夠繪制服務體驗,包括現有服務和待設計的服務。


          我們也可以與病人或醫療行業的其他利益相關者共同繪制用戶旅程,建立對用戶體驗的理解。


          你也可以直接與利益相關者合作,確定具體痛點和在服務中可能造成摩擦的其他因素。


          這套工具所建議的醫療旅程圖可以用來分析病人和/或醫療操作者的體驗并進行可視化,涉及到體驗的所有成分:角色,行為,方式以及在接受或執行醫療服務時所經歷的感情變化。


          建議

          -寫出用戶旅程地圖需要的人物簡歷。

          -卡片用為觸發材料,促進病人和醫療相關人員分享經驗,講述故事。

          -選擇每個動作所經歷的情緒,并將其垂直投射在相應的動作上。

          -患者的用戶旅程可以按照整個治療過程繪制,有助于理解不同醫療步驟之間和相關部門之間的交叉點,以及可能出現的問題,形成一個全面的體驗觀。


          5.通過評估 確定想法的優先性


          在建立背景框架,分析了觀點和體驗之后,我們開始設計解決方案。讓不同的利益相關者參與概念生成,方便作出改變或促進相關方接受新服務。


          一旦確定了解決方案,接下來就要挑選最有潛力或最合適的解決方案,這項任務也十分困難,尤其是在復雜的環境中,比如與醫療有關的環境中。

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

          文章來源:站酷   作者:馬克筆設計留學

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

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

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


          Conflux智能合約——1.入門篇

          前端達人

          Conflux移植了EVM,兼容以太坊的合約虛擬機,使用solidity作為合約語言。所以,開發需要使用remix進行合約十六進制碼的生成。

          Conflux合約需要相應的sdk部署到鏈上,形成智能合約地址,再使用call或send的方法,調用在鏈上的合約 。

          我們使用node.js作為開發環境,需要安裝node.js的環境和java sdk。node.js使用express框架,而合約部署需要對應的 js-conflux-sdk(npm install即為最新版)。建立文件夾sol,存放下面的.sol和兩個.json文件,其它安裝和檢查辦法略去2000字。

          remix下刪除所有的原來.sol文件,添加自己的test.sol文件,代碼:

          pragma solidity ^0.5.0;
          
          contract Counter { uint public count=0; event SelfEvent(address indexed sender, uint current);
          
              constructor() public {
              } function inc(uint num) public returns (uint){ return count += num;
              } function self() public { emit SelfEvent(msg.sender, count);
              }
          } 

          然后按圖示選擇配置,完成編譯,分別生成一個abi.json和一個bytecode.json。

          將bytecode文件里的bytecode字段保留值,其余內容都刪除,另存為code.json。code.json內的內容僅為:“0x60.......”。例如:

          "0x6080604052600080553480156100145......5056fea265627a7a72315820b814......0ff600baf64736f6c63430005110032"

          寫調用合約的代碼deploy.js或者call.js。deploy.js 源碼:

           // 私鑰地址,即所用conflux的錢包私鑰,注意保密 const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e'; // 合約地址 const CONTRACT = ''; const { Conflux } = require('js-conflux-sdk'); async function main() { const cfx = new Conflux({ // 節點的地址和端口號,這里用的測試網。實際最好用最新的主網地址 url: 'http://testnet-jsonrpc.conflux-chain.org:12537',
              defaultGasPrice: 100,
              defaultGas: 1000000,
              logger: console,
            }); const account = cfx.Account(PRIVATE_KEY); // create account instance console.log(account.address); // create contract instance const contract = cfx.Contract({
              abi: require('./sol/abi.json'),
              code: require('./sol/code.json'),
            }); // deploy the contract const contractinfo = await contract.constructor()
          
              .sendTransaction({ from: account,
          
                gas: 100000000, // if not set gas, will use 'cfx.defaultGas' })
              .confirmed(); console.log(contractinfo.contractCreated);
          }
          main().catch(e => console.error(e)); 

          而call.js源碼:

           const { Conflux, util } = require('js-conflux-sdk'); // 這個地址是上面打印出來的 contractAddress 變量,錢包地址及私鑰 const contractAddress = '0x2c692d83b1e4781fa9d894924f8a027c401ea9fa'; const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e'; async function main() { const cfx = new Conflux({
              url: 'http://testnet-jsonrpc.conflux-chain.org:12537',
              defaultGasPrice: 100,
              defaultGas: 1000000,
            }); const contract = cfx.Contract({
              address : contractAddress,
              abi: require('./sol/abi.json'),
            }); // 不進行記錄。注意,這里的inc就是定義在test.sol中的方法。.sol文件定義合約方法,被外部調用以實現應用目的 console.log("1輸出" + await contract.inc(10)); const account = cfx.Account(PRIVATE_KEY); // 進行記錄并花費燃油 const balance = await contract.inc(10).sendTransaction({ from: account }).confirmed();
          
          }
          main().catch(e => console.error(e)); 

          call.js里的inc()就是定義在test.sol中的方法。.sol文件定義合約方法,被外部調用以實現應用目的。

          將deploy.js和call.js放置在nodejs的工作目錄下。

          如果.js中的函數無錯,鏈上節點正常使用,sdk版本匹配,啟動node deploy.js或node call.js即可。如果有錯誤會有明顯的error提示。


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

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

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

          超級實用的干貨 . 《 部署智能合約到conflux公鏈 》

          前端達人

          找到了一位大佬的文章,受到了許多啟發


          一、準備合約

          本節課程教大家如何講智能合約部署到conflux公鏈上,首先大家可以看到下面的這個智能合約是不是很簡單。我們將會以這個合約演示部署到conflux公鏈的過程。

          pragma solidity ^0.5.0;
          
          contract Counter {
              uint public count=0;
              event SelfEvent(address indexed sender, uint current);
          
              constructor() public {
              }
          
              function inc(uint num) public returns (uint){
                  return count += num;
              }
          
              function self() public {
                  emit SelfEvent(msg.sender, count);
              }
          } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17

          二、conflux的sdk安裝

          我們使用js-conflux-sdk作為本教程的web教程,交互首先我們需要進行安裝nodejs作為我們的運行環境。飛機票一張收下吧,我們安裝好nodejs后,就可以來玩我們的sdk了。廢話不多說,直接開始擼。

          我們使用WIN + R鍵打開命令行,然后創建一個文件夾(溫馨提示切換到非系統盤玩切換方式“D:”就切換到D盤了)使用“mkdir my-project && cd my-project” 創建好項目后自動進入文件夾,然后我們運行“npm init” 進行初始化node項目,這一步會讓你確認一些東西,如果你是小白一路回車(Enter鍵)就好。如果你是前端大神,我也沒啥好教的我也不太懂。為了穩定我們使用固定版本號方式安裝依賴,我們運行 “npm install js-conflux-sdk@0.9.2” 命令進行安裝js-conflux-sdk的0.9.2版本依賴(可以使用“npm uninstall package-name” 命令刪除對應依賴)。前置準備到這里基本已經完成。

          三、編寫調用合約js代碼

          下面請看我的目錄結構跟隨我一起來學習,下面的目錄結構請不要直接看到了就創建,因為你不知道都是什么意思,看玩我的解釋在回頭創建。

          image

          小伙伴應該已經發現了 node_modules、package-lock.json、package.json 這些文件是我們在進行安裝 sdk依賴時自動生成的。其他文件目前都沒有,我們來按順序生成他們。

          先創建sol這個文件夾,然后創建這三個文件。test.sol就是上面我們的合約代碼直接拷入文件中。abi.json和code.json兩個文件是通過這個工具 remix 在線生成的。我來說下生成過程。
          首先我們將里面的文件全部刪除,然后點擊這里找到我們的項目目錄下的test.sol 文件

          我們應該看到下方我框出來的兩個按鈕了吧,那兩個按鈕就是abi.json和code.json文件的來源。abi.json我們可以直接復制過去,code.json文件我們要改點東西。

          首先我們看到的code文件應該是這樣的

          {
              "linkReferences": {},
              "object": "608060405260...c63430005110032",
              "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ",
              "sourceMap": "27:337:0 ... 37;;;;;;"
          } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          代碼有省略,太長不好看,我們看到object這個key值了吧,我們把它的值考出來然后在頭部加0x 就好了放在code.json文件中。code.js文件中只存放object的內容前面加0x,也就是下面的代碼,其他信息都不要,千萬記住了。這點很重要?。。?!

          "0x608060405260...c63430005110032" 
          
          • 1

          就是這樣的。然后我們在寫另外兩個call和deploy兩個文件

          先寫deploy文件

           // 私鑰地址
          const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
          // 合約地址
          const CONTRACT = '';
          const { Conflux } = require('js-conflux-sdk');
          
          async function main() {
            const cfx = new Conflux({
              url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
              defaultGasPrice: 100,
              defaultGas: 1000000,
            });
            const account = cfx.Account(PRIVATE_KEY); // create account instance
            console.log(account.address); 
          
            // create contract instance
            const contract = cfx.Contract({
              abi: require('./sol/RC20.abi.json'),
              bytecode: require('./sol/RC20.code.json'),
            });
          
            const receipt = await contract.constructor()
              .sendTransaction({ from: account })
              .confirmed();
            console.log(receipt.contractCreated); 
          }
          main().catch(e => console.error(e)); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28

          打開項目cmd窗口在上面的目錄下 運行命令 “node deploy.js”就將合約部署上去了

          receipt.contractCreated 這個會打印出合約地址。













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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          來源:csdn
          作者:
          原文鏈接:https://blog.csdn.net/pizhi1461/article/details/106967255

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

          yarn的安裝和使用

          前端達人

          yarn的簡介:

          Yarn是facebook發布的一款取代npm的包管理工具。


          yarn的特點:

          • 速度超快。
            • Yarn 緩存了每個下載過的包,所以再次使用時無需重復下載。 同時利用并行下載以最大化資源利用率,因此安裝速度更快。
          • 超級安全。
            • 在執行代碼之前,Yarn 會通過算法校驗每個安裝包的完整性。
          • 超級可靠。
            • 使用詳細、簡潔的鎖文件格式和明確的安裝算法,Yarn 能夠保證在不同系統上無差異的工作。

          yarn的安裝:

          1. 下載node.js,使用npm安裝
            npm install -g yarn
            查看版本:yarn --version
          2. 安裝node.js,下載yarn的安裝程序:
            提供一個.msi文件,在運行時將引導您在Windows上安裝Yarn
          3. Yarn 淘寶源安裝,分別復制粘貼以下代碼行到黑窗口運行即可
            yarn config set registry https://registry.npm.taobao.org -g
            yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

          yarn的常用命令:

          • 安裝yarn

            • npm install -g yarn
          • 安裝成功后,查看版本號:

            • yarn --version
          • 創建文件夾 yarn

            • md yarn
          • 進入yarn文件夾

            • cd yarn
          • 初始化項目

            • yarn init // 同npm init,執行輸入信息后,會生成package.json文件
          • yarn的配置項:

            • yarn config list // 顯示所有配置項
            • yarn config get <key> //顯示某配置項
            • yarn config delete <key> //刪除某配置項
            • yarn config set <key> <value> [-g|--global] //設置配置項
          • 安裝包:

            • yarn install //安裝package.json里所有包,并將包及它的所有依賴項保存進yarn.lock
            • yarn install --flat //安裝一個包的單一版本
            • yarn install --force //強制重新下載所有包
            • yarn install --production //只安裝dependencies里的包
            • yarn install --no-lockfile //不讀取或生成yarn.lock
            • yarn install --pure-lockfile //不生成yarn.lock
          • 添加包(會更新package.json和yarn.lock):

            • yarn add [package] // 在當前的項目中添加一個依賴包,會自動更新到package.json和yarn.lock文件中
            • yarn add [package]@[version] // 安裝指定版本,這里指的是主要版本,如果需要精確到小版本,使用-E參數
            • yarn add [package]@[tag] // 安裝某個tag(比如beta,next或者latest)

            //不指定依賴類型默認安裝到dependencies里,你也可以指定依賴類型:

            • yarn add --dev/-D // 加到 devDependencies
            • yarn add --peer/-P // 加到 peerDependencies
            • yarn add --optional/-O // 加到 optionalDependencies

            //默認安裝包的主要版本里的最新版本,下面兩個命令可以指定版本:

            • yarn add --exact/-E // 安裝包的精確版本。例如yarn add foo@1.2.3會接受1.9.1版,但是yarn add foo@1.2.3 --exact只會接受1.2.3版
            • yarn add --tilde/-T // 安裝包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde會接受1.2.9,但不接受1.3.0
          • 發布包

            • yarn publish
          • 移除一個包

            • yarn remove <packageName>:移除一個包,會自動更新package.json和yarn.lock
          • 更新一個依賴

            • yarn upgrade 用于更新包到基于規范范圍的最新版本
          • 運行腳本

            • yarn run 用來執行在 package.json 中 scripts 屬性下定義的腳本
          • 顯示某個包的信息

            • yarn info <packageName> 可以用來查看某個模塊的最新版本信息
          • 緩存

            • yarn cache
              • yarn cache list # 列出已緩存的每個包 yarn cache dir # 返回 全局緩存位置 yarn cache clean # 清除緩存

          npm 與 yarn命令比較:

          這里寫圖片描述


          npm 與 yarn相關問題比較:

          npm模塊的依賴:
          • npm存在一些歷史遺留問題,請看下圖:
            這里寫圖片描述

          比如說你的項目模塊依賴是圖中描述的,@1.2.1代表這個模塊的版本。在你安裝A的時候需要安裝依賴C和D,很多依賴不會指定版本號,默認會安裝最新的版本,這樣就會出現問題:比如今天安裝模塊的時候C和D是某一個版本,而當以后C、D更新的時候,再次安裝模塊就會安裝C和D的最新版本,如果新的版本無法兼容你的項目,你的程序可能就會出BUG,甚至無法運行。這就是npm的弊端,而yarn為了解決這個問題推出了yarn.lock的機制,這是作者項目中的yarn.lock文件。

          yarn.lock文件格式:

          這里寫圖片描述

          大家會看到,這個文件已經把依賴模塊的版本號全部鎖定,當你執行yarn install的時候,yarn會讀取這個文件獲得依賴的版本號,然后依照這個版本號去安裝對應的依賴模塊,這樣依賴就會被鎖定,以后再也不用擔心版本號的問題了。其他人或者其他環境下使用的時候,把這個yarn.lock拷貝到相應的環境項目下再安裝即可。
          注意:這個文件不要手動修改它,當你使用一些操作如yarn add時,yarn會自動更新yarn.lock。

          使用yrm工具管理一些npm源

          安裝

          • yarn global add yrm

          查看可用源

          • yrm ls

          選擇源

          • yrm use yarn

          快速刪除node_modules

          手動刪除真的很慢:

          • 安裝: npm install rimraf -g
          • 使用:rimraf node_modules

          rimraf是node的一個包,可以快速刪除node_modules,再也不用等半天了


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

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

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

          npm,cnpm,yarn,tyarn 區別 與安裝

          前端達人



          做前端的應該都用過標題提到的包管理器。簡單說一下這4個包管理器的區別。

          npm

          這應該是最常用的,在某些情況會出現丟包,而且由于某種原因會下載很慢,通常會配置國內鏡像。我已經很少用npm了,主要用它下載 cnpm 或 yarn。

          cnpm

          這個就是npm的國內鏡像了。

          yarn

          它和npm最大區別是,yarn是并行下載的,所以下載速度很快,當然也是要配置國內鏡像。

          tyarn

          這個就是yarn的國內鏡像了。淘寶開發的。我主要就是用 tyarn。



          一、安裝

          1.1 安裝node.js

          下載地址,選擇自己的安裝位置,一直next即可。

          :.msi安裝程序會自動添加node.js路徑到系統環境配量


          image.png

          安裝完成目錄結構:


          # 查看版本號
          H:\Users\M>npm -v
          6.4.1
          
          H:\Users\M>node -v
          v10.15.1 

          1.2 安裝cnpm

          打開cmd命令窗口,執行:

          npm install -g cnpm --registry=https://registry.npm.taobao.org
          # 默認cnpm會會安裝在自己的用戶下面,并且自動配置了用戶環境變量
          # 比如我的安裝在:H:\Users\M\AppData\Roaming\npm 
          # 查看版本號
          H:\Users\M>cnpm -v
          cnpm@6.0.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
          npm@6.8.0 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib
          \npm.js)
          node@10.15.1 (D:\Develop\nodejs\node.exe)
          npminstall@3.20.2 (H:\Users\M\AppData\Roaming\npm\node_modules\cnpm\node_modules
          \npminstall\lib\index.js)
          prefix=H:\Users\M\AppData\Roaming\npm
          win32 x64 6.1.7601
          registry=https://registry.npm.taobao.org 

          1.3 安裝tyarn

          # 國內源 $ cnpm i yarn tyarn -g #  $ tyarn -v 

          1.4 安裝umi

          $ tyarn global add umi
          $ umi -v 

          1.5安裝靜態服務

          cnpm install -g serve 
          0人點贊

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          來源:csdn 與 簡書
          作者:境與界
          鏈接:https://www.jianshu.com/p/647328be9491
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          設計沉淀錄:如何讓你的設計更有價值

          ui設計分享達人

          前言:如何讓你的設計更有價值,設計有價值代表你的方案有價值,你的方案有價值代表你的理論有價值、你的理論有價值代表你的專業能力體現,歸根到底,說明了什么人作出什么樣的作品的同時會帶來相應的價值。站在設計師的角度看,在公司里,屬于站在用戶體驗上的提出的設計建議或者設計方案,基于“以用戶為中心”理念和交互設計原則,通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。

          目錄:

          一、設計行業的發展趨勢

          a)設計與產品的關系

          b)找到自身價值的重要性

          二、了解設計師的價值分層

          a)設計協同

          b)推動業務增長

          c)設計驅動產品

          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          b)“五度”設計成果評估模型

          c)培養數據思維,利用數據提升設計的價值


          一、設計行業的發展趨勢

          a)設計與產品的關系

          以前,設計師在團隊里的位置會比較尷尬,因為沒法驗證自己對業務的推動是否產生了什么明確的價值。而大數據的來臨,設計的價值變得顯性化,作為與用戶關系密切的設計師,善用好數據,可以發揮的作用其實很大。我們可以通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。這就使得設計與產品業務關系越來越密切,是整個行業發展的必然趨勢。


          舉一個設計以小成提高業務的實例。這是我之前做的分揀軟件迭代首頁的自定義配置組件。在改動前分揀首頁功能多,甚至有時候需要滑動尋找。尋找點擊率大概是不到16%,改動后提高到了40%,不消耗任何其他人力、物力成本,就可以用設計讓CTR翻倍。

          設計目標:減少首頁模塊尋找的時間,加大成功點擊率,考慮延展性發展

          現有問題:主次功能混淆、視覺點不夠集中、點擊按鈕不明顯

          優化方案:1、主次布局調整,主上次下;2、面積放大提高模塊命中率;3、色彩區分主次按鈕;4、添加“?”自定義配置首頁主功能,加入人性化設計理念。

          體驗連接:https://www.growingio.com/projects/lPQ7bOj9/product-analytics/heatmap/j9yvlyRy(賬戶/密碼miaomiao/liuge1)


          b)找到自身價值的重要性

          自身價值顧名思義就是你的工作成果會帶來什么價值,按照公司更看重我們的設計能給產品的發展帶來多大的價值。雖然職位的性質已經很明確你的價值的體現,但是這里注重成果的價值,設計師的成果更多是設計方案,方案成果的價值的接受度也是需要從易到難的漸進的。


          舉一個設計價值體現的實例。這是我之前做的新Station組件庫——GM Design。設置組件和設計規范不僅保持了產品的統一性,且減少用戶在使用過程中的行為認知負擔,快速同事達成合作,還可以減少不必要的操作和排查,提高易用性。

          設計目標:保持產品的統一性,減少認知負擔,降低時間和人力成本,提高易用性

          現有問題:同個功能存在組件多樣、組件學習成本高、反復修改,

          優化方案:1、建立組件庫;2、功能類型劃分,采用同一個組件的變形處理;3、組件集中化; 

          體驗連接:https://lanhuapp.com/url/rKmeX 


          二、了解設計師的價值分層

          設計師的價值可以分為以下三層:設計協同、設計推動業務增長、設計驅動產品。

          a)設計協同

          一個完美的執行者,能夠在拿到需求后高效又完美地實現落地。簡單地說就是手上功夫好。

          做好這個階段需要有優秀的專業能力,良好的溝通能力,并參與到產品的探索與構思中來。


          舉一個設計協調的實例。Q2階段的B-Shop商城交互迭代。前期輸出設計基礎和設計規范,有助于開發高效實現,實時跟進UI進度和設計協助。在產品的探索中發現數字鍵盤組件的問題點,由于自己寫的數字組件具有局限性,導致體驗上無法滿足部分需求,如:輸入框的定位在數字鍵盤之上。基于這個問題點,我們提出A/B方案,A方案是自己寫的數字組件,B方案是自己寫的數字組件延用原生的邏輯,從用戶測試得出,A方案是更符合用戶操作習慣。

          設計目標:組件高效快捷輸入,側重交互體驗提升,視覺優化,提高易用性

          現有問題:學習成本高、缺少設計基礎、信息分層不明顯、體驗差

          優化方案:1、劃分主次信息,閱讀更直觀;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、圖文結合,按鈕優化,加強頁面指導性

          體驗連接:https://bshop.guanmai.cn/?cms_key=miaotest&timestamp=1561085945884#/product(賬戶/密碼miaomiao/1qaz2wsx)



          b)推動業務增長

          這個階段的設計師,會比上一個階段更能體現設計師的設計價值,并對產品產生一定的影響力。能在以用戶為中心的基礎上,推動業務的增長,所以這個階段的設計也被稱為UGD(User Growth Design)。


          需要設計師具備用戶洞見力,數據分析能力,從這兩個維度出發,去熟悉業務、分析業務,從而推動業務。

          舉一個推動業務增長的實例。Q2階段的采購APP的交互迭代。表頭的功能布局與標簽欄的“?”添加功能的調整,其實在用戶調研階段的熱力圖數據和觀察法分析得出,工具類移動端側重點在功能區,需要一目了然知道我的當前任務數是很重要的信息,且是高頻操作,所以放置頂部;標簽欄的添加功能是為了快速添加采購單據和詢價為目的,用戶群體特殊性,需要一鍵新建添加的需求。

          設計目標:側重交互體驗提升,提高工作效率,提高易用性

          現有問題:學習成本高、缺少設計基礎、操作路徑長、體驗差

          優化方案:1、操作路徑簡化,采用路徑集合彈框;2、建立設計規范;3、組件優化,符合用戶操作習慣;4、一鍵新建“?”的功能,達到快速新建

          體驗連接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(賬戶/密碼zhangsan0001/ liuge1)



          c)設計驅動產品

          這個階段的設計師,在團隊中的價值可以說是非常大了。從被動的需求接收方,轉化為從戰略層,能主動提出需求的一方。也是UXD發展的終極方向。


          三、設計師需要具備的哪些思維?

          a)雙鉆模型解決問題

          什么是雙鉆模型?

          雙鉆設計模型由英國設計協會提出,該設計模型的核心是:發現正確的問題、發現正確的解決方案。一般應用在產品開發過程中的需求定義和交互設計階段。


          雙鉆設計模型把設計過程分成4個階段:發現問題(挖掘)、定義問題(創意)、構思方案(制作)和交付方案(落地)。



          采購APP進行雙鉆模型思維構建的基礎,提供交互迭代的底層設計理論支持,在挖掘需求階段,屬于用戶調研階段;創意階段,關注點在于問題梳理、實現目的、設計層面;制作階段,尋找潛在的解決方案;落地階段,解決方案的分析和驗證,輸出最適合一個。


          b)“五度”設計成果評估模型

          用戶體驗周期(由阿里巴巴UED提出概念)


          用戶體驗周期指的是用戶與產品的關系隨著時間變化而形成的不同周期階段。用戶體驗周期可以分為「當前」和「長遠」兩個階段,每個階段中有不同的細分。

          • 「當前」階段,分為 3 個過程:

            • 觸達:用戶來訪問網站,包括第一次訪問網站的新用戶和再一次訪問網站的老用戶;

            • 行動:用戶在網站上進行相關操作;

            • 感知:用戶在操作完成后對產品形成的主觀感受。


          • 「長遠」階段:分為 2 種表現:

            • 回訪:用戶自己再次使用該產品;

            • 傳播:用戶推薦給其他人使用該產品。


          如何在具體項目中體現呢?下圖,運用一個具體項目舉例:

          c)培養數據思維,利用數據提升設計的價值

          項目與需求上線后,去驗證自己的設計是否有效地達成了目標。這個時候你就需要去看數據反饋。沒有數據就就沒有比較,沒有比較就不能進步。

          關于數據的用處有很多,舉個例子,當兩個人對各自的方案爭執不休,分別覺得對方不好,但站在各自的邏輯上似乎都能說得通,那怎么辦呢?分別做一個A/B測試,數據不會說謊,哪一個方案更有效,一目了然。

          那么如何將數據結合到我們的設計中呢?首先在設計前,我們需要先定一個目標,而每一個目標就應有一項對應的數據指標。比如,提高了某一塊的CTR(點擊通過率),提高CVR(轉化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去驗證自己的的action是否完成了自己的Goal。


          拿到了數據之后,還需要分析數據。不管是有沒有達到目標,都要去分析原因,進行復盤總結。復盤的好處是可以讓我們在這一次項目中吸取有價值的經驗—失敗了就找失敗的原因,方便以后避開同樣的錯誤;成功了就分析成功的原因,并將成功的策略復制運用到今后的工作中,增加以后的成功率。如此,不管有沒有成功,都能給我們帶來最大化的價值。我們也會更加的接近用戶、接近產品、接近業務。從而幫助我們進一步洞察用戶、挖掘新的需求。


          小結:

          以上就是今天所要分享的全部內容。再帶大家回顧一下,一共分為三部分:第一個是了解設計師的發展趨勢,第二個是趨勢下的設計師價值分層(設計協同、設計推動增長、設計驅動),第三個就是在價值分層的逐步遞升中所需要培養的雙鉆模型、GSA的策略、數據增長思維等。

          文章來源:站酷  作者:麥海欣

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

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

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


          正態分布模型在體驗設計中的分析及應用舉例

          ui設計分享達人

          B端產品往往都具有較長的業務流程和操作步驟,需要用戶循規蹈矩、通過較多的步驟找到相應的頁面,來觸達相應的用戶目標。落實到體驗設計中,需要設計師充分考慮用戶在操作路徑中的操作權重(頻率&停留時長),進一步以核心步驟為中心向路徑兩端延伸,完成頁面布局。


          如何分析和評估用戶在操作路徑中的權重呢?今天介紹一下,本人從統計學中借用的一個概念——正態分布模型,并將其應用到體驗設計的流程中。


          1 首先,什么是正態分布模型呢?


          正態分布,也稱“常態分布”,或高斯分布,是一個在數學、物理及工程等領域都非常重要的概率分布,在統計學的許多方面有著重大的影響力。


          如果一個指標受到若干獨立因素共同影響,且每個因素不能產生支配性的影響,不管每個因素本身是什么分布,它們疊加后影響的這個指標平均值就是正態分布。


          如圖:

          標準正態分布模型


          正態曲線呈鐘型,兩頭低,中間高,左右對稱因其曲線呈鐘形,因此,人們又經常稱之為鐘形曲線。


          標準的正態分布模型包含了中心極限定理的三要素,影響因素獨立,因素影響程度隨機但無法支配,各個因素之間是相加的關系。

          中心極限定理三要素


          當然,在體驗設計中正態分布模型就沒有那么復雜,而且用戶的操作也不是隨機分布。那如何在體驗設計中如何應用呢?


          接下來,介紹一下基于用戶體驗,提煉的正態分布模型。


          如圖:

          體驗設計中標準正態分布模型


          總的來說,體驗設計中的正態分布模型,是一種用來探討用戶在某一功能的操作過程(或產品的整個生命周期)中,操作頻率(權重)所集中的區間與頁面布局、信息架構之間關系的方法與思維。


          這個模型涉及兩個維度:

          一是帶有指向性的操作路徑(步驟/功能模塊),可以是一個功能的詳細、單一的操作路徑,也可以是一個產品從使用到停止使用的生命周期中,用戶對整體功能使用流程;


          二是頻率,操作路徑中的步驟或者核心功能被使用的頻率,即權重。這個維度可以直觀的反應出用戶的關注重點和高頻操作,便于后續的用戶引導及頁面布局等。


          將用戶的操作頻率按流程順序放置到坐標中,即可得到類似于正態曲線的圖形,直觀的反映出用戶在功能步驟(模塊)上的關注度。


          2 體驗設計中正態模型的類型


          根據分析功能的顆粒度不同,得到正態分布模型的驗證結果也不相同。


          由此,體驗設計中的正態模型,大體上可分為兩類:

          第一類是具體的功能(功能型),通過該功能的起始到完成,獲得該功能高頻操作及核心頁面,可有助于功能路徑優化及頁面布局、功能排布,讓用戶更方便的獲取高頻操作。


          第二是產品整體功能(產品型),通過用戶從使用到停止使用該產品的全部路徑,獲取用戶在使用產品時關注的功能,有利于明確產品定位、優化功能架構,在B端產品上還可以進行角色和權限的管理。


          接下來,我們就詳細探討一下兩種類型的正態分布模型。


          2.1 功能型的正態分布模型

          功能型的正態分布模型多用于優化產品功能及路徑。這種類型的模型關注更加聚焦,結論也更加直接,甚至可以直接應用到設計方案上。因此在分析功能路徑時,要簡化相關聯的分支路徑,避免其對聚焦問題的干擾,使分析結論更加精準。


          例如,一個手機TB的購物流程,如果要研究用戶購買行為,就需要更多的關注用戶對商品的選擇、比較等操作,同時簡化用戶的支付操作路徑;如果研究的是購物流程中用戶的支付行為,就應該相應的簡化用戶選擇產品的路徑。


          如圖:

          舉例:淘寶購物流程分析


          另外,這種類型分析結果的落地,需要格外關注功能操作路徑的入口及其他功能的銜接,保證在更大層級上的操作不會出現斷點,保證使用流暢。


          2.2、產品型的正態分布模型

          產品型的正態分布模型,可以看作眾多功能型路徑的簡化提煉版本,忽略操作細節,著眼于業務在功能模塊之間的流轉,多用于產品定位升級或架構調整。這種類型的模型是將產品的拓撲圖,按照用戶從開始使用到停止使用的的操作路徑(產品的生命周期),將其映射到坐標軸上,來直觀表現出產品的核心功能。


          如圖:

          產品型&功能型


          其結果屬于定性結論,在設計方案時更多的是參考意義,只有在進行產品定位迭代及架構調整時,才具有指導意義。因此,在不同場景下用合適的模型才能更具有說服力。


          正態分布模型的可以應用到B/C/G等多種類型的產品上,根據不同類型的產品,該模型還會有其他功能的擴展。


          例如,B/G端產品往往都具有長流程、多角色、多模塊的特點,當正態分布模型在B/G端產品上應用時,還可以清晰凸顯角色、權限的結構,有利于對用戶權限和角色的定義與管理。


          3 案例分析


          在本人所從事的安防行業中,實時報警的處理是較為高頻、且重要的業務功能。本文僅對功能型模型進行案例分析,希望該方法(思維)的表達更加清晰明確,也能夠幫到大家。


          3.1 業務概述:

          實時報警的業務流程大致是這樣的:在監控中心或崗亭,保安人員對園區的安防狀態進行警戒時,如果有異常狀況觸發了報警,系統會反饋推送給安保人員,安保人員通過錄像抓圖等信息判斷報警的緊急程度以及處理方式。


          3.2 業務定性

          該功能是典型的“海島事件”,具有偶然性和急迫性的特點。所謂海島事件,是本人對具有偶然性與急迫性特點業務的概括統稱,后續可以寫文章專門探討該問題。


          3.3  場景推演

          安保人員每時每刻都全神貫注監管整個區域的安全狀態,是不可能的,更何況這類海島事件呢?所以,在發生報警時安保人員大概率處在“摸魚”狀態。



          當有報警進入時,安保人員第一時間需要確認的是報警的類型以及位置,從而快速判斷如何處理。只有當報警信息不明確時,安保人員才會進一步通過錄像、抓圖、關聯的監控來進一步判斷報警信息。


          實時報警場景推演


          3.4  報警業務處理的正態模型分析

          在整個場景推演過程中,用戶的關注重點是報警詳情以及報警信息的確認過程,會有較少的概率查看輔助信息,因此需要保留輔助信息的入口。


          如圖:


          3.5  方案展示

          方案采用瀑布流式,高權重的關鍵信息擁有更高的頁面權重,用戶可以快速獲取信息,以判斷處理方式。同時,漸進式展示確認信、輔助信息,如抓圖、錄像、關聯視頻等,一方面可以減少對用戶決策的干擾,同時能夠快速獲取這些信息,輔助用戶做出判斷。


          由于方案涉及到公司項目,所以方案不方便直接展示,這里只展示頁面信息布局。



          我們都知道,在頁面縱向布局上,隨著視覺流的下移,用戶的關注度會逐步降低,因此,在實時報警處理頁面布局上,將從上到下信息的重要性逐級降低。


          首先是實時報警處理的核心區,分為兩個部分基本信息區與視頻輔助區,這兩部分信息是判斷實時報警性質以及處理方式的主要依據。其中,基本信息區是最重要的,用戶可以根據報警的基本信息,來確定如何處理報警。對于大部分的報警信息,用戶可直接判斷報警是否需要處理,或是進一步的確認及驗證,盡可能的減少用戶的操作;因此,報警的處理入口,緊隨基本信息。


          而視頻輔助區是對部分報警的回放確認,是在查看基本信息后的進一步操作,頻率相對較低,因此雖然屬于核心區,但是層級卻低于基本信息的展示。


          輔助驗證區放置的報警期間的連續抓圖,可以滿足用戶的放大查看,進行報警輔助確認,隨著用戶視覺流下移,其重要程度迅速降低,相應的操作的步驟也較為復雜,頁面視覺權重也有較大的壓縮。


          最后,對于極少的報警信息,用戶需要通過關聯視頻的信息進行驗證,可通過頁面底部的關聯視頻入口,點擊展開關聯視頻浮層,進行報警信息驗證。這是整個實時報警的最后一個層級信息展示。



          4 寫在最后


          正態分布模型不僅僅是一個工具、方法,同時,也是一種設計思維。


          在設計之初,充分理解功能的定位,完善功能入口,讓用戶更容易觸達產品的核心功能。然后通過核心功能向業務兩側進行延伸,進而覆蓋整個業務,完成產品的框架與流程的構建。


          在設計之中,關注高頻的核心步驟,讓用戶的高頻操作具有更簡便的操作空間,把用戶更想知道、更想操作的內容推送到用戶面前,讓用戶在整個操作流程中的操作頻率與頁面布局的權重分布相匹配,而不是想當然。


          只有這樣,設計才更具價值,才能培養更忠誠的用戶。

          文章來源:站酷  作者:體驗設計思

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

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

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


          分類

          日歷

          鏈接

          個人資料

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

          存檔

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