在本文中，我們將發現：
3D視覺設計師的內卷將會越來越嚴重
數據可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現滾動敘事（scrollytelling）。（彩云注：這個技術的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。
它是一種敘事形式，可以在網頁和APP上呈現。想象一下，在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現在你看到的每一個流行網站上。
另一方面，scrolllytelling讓用戶真正去閱讀內容。你可以用動態文本讓他們產生興趣，比如谷歌的網站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節。
所以，最好的網站不可能在2天內建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結果是值得的。頁面變成“活的”，每一秒都有新的事情發生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業網站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據，你需要讓它不僅簡單，而且有趣。
數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結合。以下是IAmBinadam展示數據的方式:
通過去除數據集的復雜性，使信息更容易讓讀者感知。
不同級別的數據具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結論?？紤]到如今人們消費的數據量巨大，那些干凈整潔的數字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據英國國家統計局的數據，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數據。
設計師做好數據可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數據的方式
1）圖表和曲線圖
2）插圖
3）靜態信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數據可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數據的圖形元素與數值總數的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數據編排的更緊密
Graph by Hootsuite
3）客觀地描述數據。不要使用夸張的圖表，可視化數據可以看起來很酷，但真實永遠是更重要的。
根據We Are Social的數據，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數量增長了1.8%(9300萬)，而手機聯網總數量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數量增長了13%以上。到2021年初，社交網絡上已有近5億新用戶注冊。根據App Annie的數據，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網時長超過3.5萬億小時。
令人印象深刻的數字，是嗎？似乎到2022年，為產品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網站這是你應該了解的重要數據。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內部業務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業務流程的移動應用。
如今，像這樣的手機應用使企業能夠執行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現一些網站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發。問問自己的APP能提供什么新的商業機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發手機網站比開發手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現，它允許你根據打開網站的設備屏幕來調整網站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅動的網絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內，現在開發小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術已經在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術和動畫已經出現在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經典動畫相比，逼真的3D形狀結合動畫總是引人注目的。
“從技術上講，通過3D更容易傳達更多內容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創建更有趣的組合，也作為一個優秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D。或者兩者兼而有之?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內容更有趣。
動畫是2022年重要的網頁設計趨勢。2022年，如果沒有它，你的產品很可能會看起來就像個半成品。混合風格的動畫越來越受歡迎:定格動畫和3D動畫的結合，2D動畫和3D動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產品的質量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業設計師數量的增長，實現新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態排版
你有沒有想過讓字母跳舞?
據Statista統計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問，動畫插圖的優勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們為界面元素增強價值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現特定的行為。
2022年，在線品牌面臨著新的挑戰，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態內容，帶有動態圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態的logo更有趣。
4）最重要的是展示了歷史。靜態logo背后的想法正在動畫中發展。由于這一點，在幾秒鐘內，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
菲茲定律由心理學家Paul Fitt于1954年提出，它是物理世界中人體運動的數學模型。這一定律提出之后，在很多領域都得到了應用，但是在人機交互領域的影響尤為深遠，可以說是人機交互領域的第一條定律，它通常被用來解釋鼠標（PC端）和手勢（移動端）在界面中的移動規律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素，目的：易于查找和選擇。作為一個數學模型，菲茲定律是有表達式的，表達式如下：
T 是完成動作的時間a代表裝置開始結束的時間，b表示該裝置的速度，這些常數可從實測數據進行直線近似取得。D是起始位置到目標中心的距離。w是目標區域在運動維上的寬度。
結論： 離目標距離越近，所需的時間越短；目標尺寸越大，完成速度越快，時間就越短。也就是說，預測點擊一個目標的時間，取決于目標和當前位置的距離+目標的大小。
1 、放大可點擊元素的尺寸
大且近的目標元素讓用戶不需要做太精細的調整就可以輕易選中。小而遠的按鈕則意味著用戶要將鼠標/手指移動比較長的一段距離，并且再進行精細的調整才能選中，這樣不僅難以點擊、且需要花費更多的時間。
這里的大指按鈕的實際大小、也就是點擊熱區的大小，包含按鈕留白區域的大小。網頁設計里現在常見的設計方式就是大按鈕，四周大量留白； 而移動端設計里通常會擴展寬度，使用各種通欄按鈕，使用戶操作更加容易和快捷，可點擊圖標也會放大可點擊區域。
注意： 并不能無限的放大。大小給可用性帶來的加成是有限制的，如果把一個很小的按鈕放大，它會變得更易于點擊；但是如果按鈕尺寸已經足夠大，那么再放大尺寸，也并不會提高可用性和用戶操作效率。
2、 減少移動的距離
依據菲茨定律所言，距離目標越近，用戶點擊越快。所以我們通常會縮短當前交互元素和目標元素的距離，來提高用戶的使用效率和交互體驗。
1>減少絕對距離
因為移動端用戶通常為單手操作，也就是大拇指為主要操作工具，在現在大屏手機泛濫的情況下，屏幕很多地方是單手無法觸及的，所以現在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區域。
2>減少相對距離
在兩個或多個操作中，通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認刪除操作，因為它是重要的負向操作，所以對于雙重確認，相比于在當前列表區域確認刪除（如下圖微信），如果使用彈框，那么用戶手勢的移動距離相對會更長（如下圖淘寶）
p：對于微信來說，刪除對話是用戶比較常執行的操作，因此便利性應該更高；而淘寶更想阻止用戶進行此操作。 也就是說并不是所有操作都需要縮短距離。
3 、相關元素靠近
相關的內容或者交互元素要彼此靠近，可以在視覺上增強他們之間的相關性認知
4 、屏幕的邊緣和角落無限大
因為屏幕的邊角有一個隱形的“結界”，可以阻止用戶鼠標因為大幅移動而超出目標區域范圍，因此用戶可以直接將鼠標大幅度移動到屏幕的邊緣、角落，而不用進一步微調。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素，不管箭頭移動多遠，最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界，用戶使用效率比較高。
其他補充：
1、餅狀菜單會比線型菜單更易選擇，而且錯誤率更低，這里面有兩個原因：
餅狀菜單的每個菜單項和菜單中心的距離都一致
餅狀菜單的每個菜單項的楔形目標區域都非常大，一般都會擴展到屏幕的邊緣
2、 目標點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以，這樣看來目標點就足夠大了。原因是基于fitts定律，它的一個分母的增大了而使得界面的效率提高了
總結：
1、我們想要更容易點擊到控件，就應該放在屏幕的邊緣或角落里。讓常用的控件更大，更容易辨別；
2、使用屏幕的邊緣和角落讓控件有效擴大，永遠不要把控件放在離屏幕邊緣或角落一個像素遠的地方；
3、邊緣之外的地方，也可以算作目標點的面積，這樣一來，目標的面積就被無限的放大了，也更方便用戶操作。
補充一張雅虎ued繪制的關于Fitts’ Law的Q版小漫畫，先初步了解下:
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要聊一下產品中使用的幾個交互設計原則，一致性，費茨定律，容錯性，希克定律。
我們在做設計時，經常會講到要保持一致。一致性的好處從外部來說，可以極大的提升產品的易用性，降低用戶的學習成本，同時也有利于品牌形象的傳達。從內部來說，將一些相同或類似的功能進行復用，提高團隊的協作效率，讓資源得到更充分的利用。
一致性體現在產品中可以體現在很多方面，比如是視覺風格統一，交互操作統一。視覺上可以是配色、字體、圖標、頁面布局、插畫，以及在不同終端上的統一。交互操作可以是相同相似功能在不同頁面的呼出方式，一些地方動畫的表現形式。
另外，產品與本身所處的行業內的競品的一致性，比如音樂播放頁面，用戶已經習慣了上面是歌曲宣傳圖，下面是播放切換的控件，各個產品的排版布局都是相似的，這樣的統一可以讓用戶沒有陌生感，在接觸一個新的音樂類產品時很快的上手。
滴答清單的網頁端、桌面版、網頁插件，將頁面的主要功能信息都放在了左邊，中間部分是清單列表，最右側是清單詳情，配色都是用了灰色、白色、淺藍色，圖標風格上使用的面型風格，這三個終端的視覺風格是保持了高度的一致，傳遞給用戶的也是很強的品牌理念。
阿里云盤，App啟動頁和網頁功能介紹，都是使用了C4D插畫，來保證兩個終端品牌風格的一致性。
微博App的詳情頁及他人主頁，這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式，用戶可以在不用思考的情況下直接操作，這是利用了相同功能在不同頁面復用了相同的交互控件。
簡單點來說，有兩個關鍵因素，兩個操作目標的距離、操作目標大小。第一個因素意思就是在當前產品中兩步操作，手指移動的距離越短，操作就越容易。第二個因素是當前操作目標越大，操作越容易。
石墨文檔App。在頁面右下角有一個懸浮的新建按鈕，點擊后從底部彈出活動視圖，用戶可以進行新建文檔、表格等操作。這里使用從底部彈出活動視圖，而不是在新頁面或者頁面中間，正是利用了費茨定律，縮短了兩步操作之間手指移動的距離，降低操作難度。
滴滴出行、如祺出行
滴滴出行打車頁面，App首先會自動定位你當前所在位置為出發位置，目的地一欄顯示文案「輸入目的地」。設計師將輸入框設計的很大，文案字體也很大，在當前頁面中非常醒目，極大的方便了用戶的操作。這就是應用了費茨定律的第二個因素，當前操作目標越大，操作也就越容易。
反觀如祺出行的打車頁面，出發地一欄和目的地一欄的尺寸是一樣大的，都是使用圖標+文字樣式，出發地一欄使用深灰色的圖標、深灰色的字體，而目的地一欄圖標雖然使用了橙色主題色，但是文字的顏色是淺灰色，字號也沒有放大，非常不顯眼。要知道用戶當前的迫切需求是輸入目的地，這樣設計無疑是增加了用戶操作的難度。
平時在操作產品界面時，經常會因為一些原因造成操作錯誤，而有些錯誤造成的損失是無法挽回的。那么設計師應該怎么避免用戶操作中犯錯呢？容錯性原則可以很好的解決這個問題。容錯性定義是：
“容錯性是產品對錯誤操作的承載性能，即一個產品操作時出現錯誤的概率和錯誤出現后得到解決的概率和效率。容錯性最初應用于計算機領域，它的存在能保證系統在故障存在的情況下不失效，仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢?！?/span>
拆解一下，影響「操作時出現錯誤的概率」的因素有，操作前的引導提醒以及操作時的提示。影響「錯誤出現后得到解決的概率和效率」的因素有，操作后的解決方案
微信的修改微信號功能，不同于修改昵稱直接進入編輯頁面，微信在中間增加了一個頁面，頁面內容顯示當前的微信號及提示文字，目的是提醒用戶要慎重，避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導提醒，降低了出現錯誤的概率。
QQ注冊頁面，用戶輸入昵稱后，系統會檢測昵稱是否可用，及時給出給出提示。輸入密碼時會自動出現密碼設置的提示，及時提醒密碼都有哪些規則，避免用戶輸入不符合要求的密碼。操作中給出這些相應的提示，可以使用戶更加流暢的完成注冊流程。
印象筆記網頁版。將一篇筆記刪除后，頁面頂部會出現一個提示框，文案是「已將XX文章移至廢紙簍」，提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的，這里的提示框給予了用戶反悔的機會，幫助用戶及時的找回筆記，彌補錯誤。
?？硕?，又叫是?？艘缓Ｂ桑℉ick Hymalrs 1aw），是一種心理物理學定律。應用在產品設計當中，就是當頁面中需要有不同選項時，要盡可能的少而簡單，降低用戶的決策成本。
美團外賣頁面的金剛區，共有三行應用。核心推薦的5個應用是放在第一排，其他10個應用排成兩排，核心推薦應用與其他應用在圖標風格上使用了區別化設計，用戶在進行選擇時變成了5選1，而不是15選1。這是設計師在功能設計時針對應用做出了重要程度的區分，以幫助用戶更快做出選擇。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
除非有更好的選擇，否則就遵從標準 —— 阿蘭庫珀
費茨定律：
距離：起始位置離目標位置越遠，我們到達目標位置所花費的時間就越長，反之亦然。
目標大?。耗繕嗣娣e越大，我們定位到目標位置所花費的時間就越短，反之，目標越小，定位時間越長。
·生活中的費茨定律
剎車和油門踏板相距很近，剎車時的物理面積比油門的物理面積大，會最快接觸到踏板，減少事故的發生。
·界面中的費茨定律
（1）距離目標位置盡量縮短，相關操作保持親密性
例如：抖音的視頻播放界面，系統會判斷用戶進行觸發時手指與屏幕的接觸位置，并將操作按鈕顯示在離用戶手指最近的位置。
（2）目標尺寸大小要合適
目標點擊熱區在合適的范圍內，越大越容易精準點擊，越小越容易誤操作。iOS交互指南中規定最小點擊熱區為44*44。
（3）拇指原則
人們在使用手機時，75%的交互操作都是由拇指驅動的，考慮到費茨定律，如果目標位置超出拇指的移動范圍，操作成本增加。
米勒定律：
是交互設計中常用的一個定律，美國心理學家對人的記憶能力進行定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，超過這個范圍就容易出錯，在7+2與7-2之間浮動。
·生活中的米勒定律
電話號碼，銀行卡號，身份證號碼進行數字分隔，降低記憶成本，提高信息的易讀性，視覺防錯。
·界面中的米勒定律
（1）分段記憶，信息分層
文章、文本中的字號、字間距，目的就是便于讀者記憶和提高易讀性
（2）導航和選項卡不超過9個
網頁設計的一級導航不要超過9個，如果導航和選項卡內容過多，可通過聚合按鈕來包容其他次要入口。（用戶使用導航就是要快速找到自己想要的內容，如不能快速查找，用戶可能會就此流失掉）
（3）系列位置效應
首因效應：相對中間位置，我們對最前面的物體記憶清晰。
新近效應：相對中間位置，對序列末尾物體記憶更清晰。
席克定律：
是一種心理物理學定律，用戶所面臨的選擇數量越多，花費時間越長，人機交互界面選項越多，用戶決策時間越長。
·生活中的席克定律
遙控器按鈕越少，越快做出操作；如交互設計四策略：刪除、組合、隱藏、轉移。功能層級也需要細分核心功能、輔助功能、邊緣功能。而核心功能是進入產品第一個發現的功能，操作頻率高，所以它的視覺應是最突出的，可以幫助用戶增強感知和節約選擇時間。
·界面中的席克定律
（1）減少選項并提供默認值
選項越多，用戶決策的時間越長，減少用戶思考的時間就是減少操作時間和學習成本，讓用戶不思考就做出正確的選擇，對于小模塊來說，一般選項不超過9個，9個以上可以用交互約束用戶的行為，如展開收縮。
（2）選項分類分層，信息區分主次
在菜單欄的設計過程中，我們會進行同類分組和多級分層的設計，效率會更高。重點信息、推薦信息和普通信息要在時間上做區分，這樣才能搶占視覺并在第一時間感知到。
（3）分步完成，分布顯示
分解復雜流程，讓用戶一步步操作，而不是全部堆到用戶面前，通過分步完成一個任務流，降低其他信息給用戶帶來的干擾。例如：用戶填寫表單時，可展示選項，當填完最后一項選“其他”時，再展開剩余的表單，目的上是為了減輕大量表單，給用戶感知上帶來的壓力，達到場景細分的目的。
接近法則：
接近法則也是格式塔理論中我們最熟悉的，最常用的一種法則。觀察者看到彼此臨近的物體時，會將它們視為一體。
·生活中的接近法則
小區規劃圖中，會通過較寬的過道，綠植圍欄來劃分他們之間的關系，從而增強人們的感知。
·界面中的接近法則
界面中的接近原則是對相似的信息及功能類別進行分組、布局。作用是直接影響到用戶與產品的視覺交流，引導用戶的瀏覽及操作行為。
常見的在列表頁面，通過色塊區分大組與大組，分割線區分小組與小組，目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性。
以上這四條是我們在平常工作時都會用到的，我們再進行一個界面的設計時應該對照下以上幾條定律，在與產品或開發battle時也能有理有據，告訴他我們「為什么這樣設計」。寫的手有些痛，剩下的4條定律下期我再繼續補充，下期見～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
八個交互設計原則幫你避免出現基礎錯誤
1 一致性：一致性能給用戶節約成本、元素風格統一和延續性、產品內部結構的一致性
2 反饋：操作成功或失敗都有明確的反饋、告訴用戶此刻的狀態是什么會有什么結果
3 方便使用： 減法設計（扁平的框架設計—減少不必要的操作步驟，每個流程清晰沒有太多分支）
重點功能隨手可用 多選擇少輸入
4 預防出錯/防錯原則： 操作給予提示
5 幫助用戶認識改正錯誤：如果出錯要幫助用戶從錯誤中恢復過來
6 高識別性：（復雜的交互要給與引導和幫助）
7 用戶自由控制權：用戶可以取消正在執行的操作 每個層級都能找到上一級的方法
8 符合用戶的操作習慣
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
源起
由于之前曾經在后臺系統開發公司工作過的緣故，所以有些后臺管理系統界面的產出。后來雖然從那家公司離職，但也接到過一些后臺界面設計和優化的項目，前前后后也快十來個了。
這里想分享下一些關于后臺界面設計的觀點（tucao）。
一，定義好表格規范強于為每個表格出設計稿
表格是構成后臺使用界面的重要組成之一，聚合了眾多信息并提供操作入口。并且后臺系統中一般會需要數量眾多的表格。
這種情況下如果每張表格都出設計稿，是一件很費時費力的事情，更關鍵的是對開發落地不一定有什么實際意義。
所以這種情況下，定義好表格規范要遠遠強于為每個列表出設計稿。
下圖是在某系統設計中定義的表格規范，定義了不同信息之間的間距，信息塊內部的浮動間距等。
二，考慮未來頁面信息密度增高的情形，避免使用過大的組件。
2019年在某系統設計中，由于初期頁面內容比較少，為了讓用戶擁有更大的點擊操作區域，利用頁面空間，所以讓下拉菜單，輸入框等控件略微大了一點點。
后來頁面內容逐步增多，特別是篩選功能越來越多時，就尷尬了。使用原有的控件，篩選區域就會臃腫不堪，擠占信息展示區域的空間。新設計控件又會與其他頁面不統一，修改工作量會很大。
所以即便頁面信息少，也要考慮頁面信息密度增高的情形，避免是使用過大的組件。
三，根據用戶常用的顯示器分辨率設計后臺
一般情況下我們會按1920px的寬度出設計稿，然后再交付給開發做自適應。
但是后來發現頁面信息密度很高時，簡單粗暴的自適應難免會不盡人意。
并且實際工作環境中，很多后臺的使用者幾乎全部情形都是用筆記本，這種情形下使用筆記本的尺寸設計更為合適，或者使用1440px的寬度出設計稿，平衡對大小屏幕的設計考慮。
最好的方式當然是與需求方充分溝通，商定設計稿寬度。很多需求部門的電腦都是統一采購的，顯示器分辨率是全部統一的。
2020年某ERP設計項目，一張表單以1920px寬度出了設計稿，后來應甲方需要，另外單獨出了一版1200px版本。
四，與開發討論使用何種組件庫，基于組件庫提供界面優化方案
在實際的后臺項目開發過程中，很多項目并不使用自己定制的組件庫，而是使用第三方框架。
這種情形下最合適的方式是與開發討論使用何種組件庫，基于組件庫提供界面優化方案，基于組件庫提供高密度復雜頁面的編排，重難點頁面的設計。
設計的產出應該以實際實現效果為導向，而不是止步于設計稿。
幾個常用的組件庫
https://www.iviewui.com/
https://element.eleme.cn/#/zh-CN/resource
https://ant.design/docs/spec/introduce-cn
五，嘗試考慮使用卡片展示列表信息
后臺頁面中經常會存在大量列表的情形，如果某個列表字段不多并不會隨便增加，可以嘗試一排信息放在一張卡片上，使用卡片展示列表信息，改變頁面單調的版式。
不過字段，操作按鈕一旦增加，就比較麻煩了。
六，導航區不要過大，盡量給工作區留出空間。
如果使用固定寬度的導航區，過寬的導航區會擠占工作區的空間，在筆記本等小屏幕電腦上會更加明顯。所以需要合理控制大小。
七，靈活使用不同板塊樣式，分隔方式區分高密度頁面中的信息
后臺設計中經常會遇到一個頁面需要顯示很多不同類型信息的需求，可以使用不同底色，卡片，不同層級的分隔線來分割版面，實現不同類型信息的區別顯示。
應客戶需要，這張客戶詳情頁面只能以彈窗形式出現。反復使用底色分割，在盡可能簡潔的同時將不同信息區分開來。
結語
以上的觀點僅代表個人的看法，可能有一些無法令人接受，歡迎各位一起探討，或者給出更好的解決方案。
感覺有幫助的話點個贊喲~
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要?？ㄆ皆O計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢。卡片式設計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在UI設計中，很多設計師都苦惱于自己的界面設計“沒有設計感”，感覺看起來“不高級”，到底是為什么呢？其實就是在一些細節的處理上略缺火候，掌握下面這15個小技巧，能讓你的UI界面質感翻倍！
1、雙重陰影，突出立體感
設計師在設計時，為了突出里按鈕的立體感，往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框，可以讓陰影效果顯得更清晰，而不會與原本的按鈕混為一體。
2、只用一種字體，保持視覺一致性
為了讓設計更美觀，許多設計師會在一個界面使用多種字體，但實際上，一個界面里只使用一種字體更為美觀，可以幫助界面產生統一的設計效果。
3、一種字體，不同字重
如果選擇一種字體進行設計會稍顯單調，那可以根據內容的輕重優先級，來選擇不同的字重來做以區分。
4、適當留白
當內容豐富時，更需要適當的留白，才能讓設計具有呼吸感，更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本，總會讓人閱讀有困難，可以采取加粗、添加漸變等方式來處理文本，讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性，應該使用顏色對比、尺寸或標簽，來確保該按鈕突出。
7、字號越小，行距應該越寬
字號越小，閱讀起來障礙更明顯，增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間，建議給出進度提示，讓用戶可以隨時了解下載進度，不會中途取消下載。
9、同個界面，文本長度盡量一致
基于人的閱讀習慣，研究總結出，單列頁面里，45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度，可以明確突出所選元素。
12、標題的行高不要太高
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍。
13、大寫標題，提高字間距
當標題全部為大寫字母時，增加字母間距可以提高可讀性，同時又增強了一絲設計感。
14、增添頁面動態
可以在加載中添加一些提醒讓用戶理解當前運行狀態，例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作（例如，注冊或登錄），應該直接放在醒目位置，而非隱藏在菜單欄中。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
時我們傾向于將我們的設計視為藝術品。但如果我們用這種方式來思考它們，就意味著它們不會準備好面對“現實世界”的不確定條件。但是，設計一個可以隨時改變的界面也很美 - 而且，讓我們承認它，接口確實一直在變化。我最喜歡設計移動應用程序的一個方面是，從最初的概念到你對所有界面細節進行微調和拋光的時候，這是一個包含許多步驟的過程。
我們是視覺思考者，擁有訓練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設計階段的原因，這也是我們可能對其他任務感到厭倦的原因之一。
這也意味著我們經常推遲工作流程的其他重要部分：定義用戶需求和目標，草擬任務流程，處理信息的所有細節和交互設計等。這些是同樣重要的是，它們更抽象，更難以讓人想象它們將如何成為最終產品的有形部分。
當我們正在進行視覺設計時，所謂的像素完美哲學可能是一個陷阱，使我們花費更多的時間來制作細節，直到最小的細節處于界面的“完美”位置。這導致一代設計師使用Dribbble和Behance主要顯示應用程序和網站的精美屏幕，并且更關注外觀而不是設計實際工作方式。在現實世界中，事情往往不如我們期望的那樣好。
就個人而言，我認為最好的設計（當談到用戶界面設計時）不僅外觀和感覺良好，而且還可以優雅地響應變化的條件甚至不可預測的情況。
在構建產品的漫長道路上，設計師需要更多的協作，而不是專注于視覺設計。這正是我為了這篇文章專注的地方。在接下來的幾段中，我將向你提供一些提示和技巧，說明如何將你正在進行的應用程序設計用于測試，并了解它是否已準備好發布到市場。
在不完美中尋找美
當我在大學學習平面設計時，他們教會了我們平衡，對齊，比例和張力的美感，以及如何在空間中定位元素，使它們和諧悅目。憑借這些知識，我的生活發生了變化，我開始以不同的眼光看世界。后來，我開始設計界面，我試圖將相同的原則付諸實踐，屏幕上的所有信息都應該形成一個非常令人滿意的視覺構圖。
如果你將這些原則應用于移動應用程序設計，那么我們發現必須顯示適量的信息。例如，如果一個屏幕必須列出人們的姓名，設計師通常會選擇一些短而普通的名字，并將它們完美地排列在一起，沒有留下任何可能破壞設計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設：在混亂和不完美中沒有美，盡管這兩個方面在現實世界中經常出現。但是視覺界面并不是一件值得欣賞的靜態藝術品; 它們是動態的，功能性的空間，可以改變和適應每個人使用它們。我們不應該屈服于純粹為美學設計的誘惑，因為我們永遠無法控制界面必須呈現給人們的一切。
相反，我們必須設計變革！這就是日本人所說的wabi-sabi，一個“以接受短暫和不完美為中心的世界觀”。
因此，以不同的方式思考和設計是很重要的：
● 嘗試以多種方式在你的設計中呈現數據;
● 盡可能使用真實數據。
當你嘗試以幾種方式呈現數據時，包括一些不可預測的數據，你將能夠測試界面是否已準備好處理超出設計“舒適區”的這些情況。此外，為極端情況做好準備。
如果你已經推出了該產品，這將更容易，因為你可以關注實際數據并將其用于你正在進行的設計過程中作為參考。但是如果你正在研究一些新的東西，那么你將不得不深入挖掘，做一些研究，并嘗試了解以后如何信息。你還可以與后端團隊的開發人員討論此問題，他們將能夠更好地向你解釋將存儲和呈現的數據類型。
我給你一個更具圖形的例子，我的開發者朋友稱之為“漂亮的朋友綜合癥”。當我們設計一個包含人物圖片的屏幕時，如用戶檔案，我們傾向于使用在設計中看起來很好并且很漂亮的人的照片。然而，當他看到這樣的設計時，我的朋友說：“我希望我有朋友這么帥?！?
因此，“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣，你就可以測試重疊元素在不同背景下的外觀，讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應用程序的工作方式，我們天生就是樂觀主義者。我們認為一切都會快速順利地進行，而且不會中斷，因為......為什么不呢？這就是為什么我們有時會忘記如何設計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例，如果突然互聯網連接中斷，會發生什么？或者，如果瀏覽器在執行任務時嘗試連接到API時出錯？如果連接速度太慢，是否會有加載指示器（例如微調器或進度條），或者在加載實際數據時是否會有一些占位符填充顯示塊？那么刷新應用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談論用戶所犯的錯誤（例如，在填寫表單時犯了錯誤），而是關于不受其控制但仍然發生的錯誤。在這種情況下，與開發人員交談，并了解不同屏幕上可能出現的問題，然后設計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執行不同的操作。
無論如何，確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應用程序的整個布局。然而，當我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目，那么請向前看并考慮下一步：在執行操作時是否會顯示加載狀態？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態一樣，同樣也適用于單個元素。
此外，請考慮產品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執行動作。如果這對你來說太具有挑戰性，因為你之前可能已經多次這樣做了，現在它變成了一種自動化的任務，并問同事，朋友或活躍用戶看看設計或原型?？吹狡渌耸褂貌⑴c你的設計進行互動可能很有啟發性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時，我通常會將手機放在我旁邊，以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在Android平臺上）; 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設備。
在為各種屏幕尺寸和方向準備設計時，不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況，以及如何進行必要的調整，即使它意味著偏離原始設計。
在這些情況下，我們之前討論過的相同原則仍然適用：不可預測的情況，不同類型的內容，可變數量的信息，缺少數據等等。你必須針對各種可能的場景進行設計。不要陷入將屏幕設計為產品的單獨部分的陷阱，它們都是相互連接的。
這不僅對你有用，而且對開發人員也有幫助，他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么，明天你可能需要
你可能已經注意到，本文中許多要點的目標是減少意外情況。即便如此，在很多情況下你也無法得到明確的答案。開發人員經常會問，“那么，如果我這樣做會發生什么呢？”指出你以前沒有考慮過的潛在結果。
如果發生這種情況，那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考，并考慮如何將該特定問題的答案設計為以靈活的方式工作，以便你以后可以重用它。
畢竟，這就是我們UI設計師所做的 - 我們設計和定義適應未預料到的狀態，條件和流程的靈活系統。將你的界面視為移動，更換智能部件的生動生態系統，而不是單個像素塊的集合。
在此過程的這一部分中，你需要與團隊中的開發人員密切合作，主要是為許多不同情況定義一組行為規則。但保持良好的平衡 - 盡量不要過度設計。用一點常識來設定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住，良好的設計系統是靈活的，并且在某些情況下為規則的某些例外做好準備。
另一方面，想一想你已經設計過的元素如何調整以適應新的情況。如果你創建一個設計組件庫，你將會看到更好的結果，因此，只需快速瀏覽一下庫，你就會知道是否需要從頭開始設計某些東西，或者你可以使用現成的東西。
結論
基于設計系統的優雅解決方案具有明確定義的問題將使我們工作中的視覺設計更加有趣，因為我們可以專注于界面的改進，拋光和愉悅，而無需無休止地迭代。當我們過早地跳到視覺效果時，我們必須同時解決問題并制作界面，這通常會導致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰性，但過了一段時間你會喜歡在限制范圍內工作。這也將改變你的思維方式，并希望幫助你擺脫對視覺細節的關注。你將成為一個更加完善和有能力的用戶體驗設計師，使用適當的可交付成果，而不僅僅是生成無窮無盡的視覺模型和組合。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
