網頁的第一印象至關重要，它在很大程度上決定用戶是否有興趣瀏覽下去。而這個第一印象則是由網頁的首屏部分所決定，它是最直接傳遞出網頁的功能與印象的媒介。
一個好的首屏，也能讓你在同質化嚴重的情況下，脫穎而出實現彎道超車。好的，今天就讓我們一起來研究一下，網頁首屏部分的組成、方式以及設計手法吧。
說到首屏大家肯定第一反應是這樣的一個形式，有小伙伴可能會說，這個不就是個 Banner 嗎？那也是很多設計師的誤區，網頁首屏中存在著大量的交互元素在其中。
我們現在來看第一個網頁，這里就包括了五個互動的按鈕在其中，這個是 Banner 所不具備的功能，接下來我們快速的瀏覽一下，這個區域的主要組成模塊。
這個網頁，是一個簡單的組合形式，我們可以劃分為全局導航欄和形象部分。
這兩個網頁是類似的形式，我們稱之為大尺寸頁眉，即這整個區域都是頁眉的區域。
這其中我們又可以細分為：全局導航欄、全屏圖片和形象文案部分。
我們順著這個思路繼續分下去，看到這個網頁的首屏部分，包括了全局導航欄、形象文案和社交鏈接。
但具體我們的首屏高度要設計多少呢？這里我們可以參考 w3school 網站的數據。其他的尺寸我們直接忽略掉，剩下的我們看到 1366×768 像素的尺寸是一個最常見的尺寸。
這里我建立了一個 1920X1080 高度的畫板，點擊標記區域的 “視口高度” 將數值改為 768 像素，即可。
右面的畫板上就出現了一個虛線標記的地方，這個就是我們的視口高度。
有很多小伙伴問我，老師什么是主頁？什么是著陸頁？它們是相同類型的東西嗎？答案肯定是否定的。
我們以這個網頁為例，它是一個游戲的專題頁面，并不是這個網頁的主頁。
而是這個網頁的著陸頁，用戶點擊搜索推廣、信息流或其他形式的廣告打開的第一個頁面。著陸頁可以是網站上的一個頁面，也有直接把主頁當作著陸頁使用的情況。
進入的才是這個網頁真正的主頁部分。
如果還不理解，我們可以一本書籍為例。這個書籍的封面可以理解為首頁。而它內部的每一個頁面都可以理解為著陸頁。每個頁面都有自己專門的關鍵詞，這樣就不需要用戶，每次都是從首頁進入了，方便用戶使用。
著陸頁可以著重用來介紹專題活動或者產品。
這個著陸頁作為整個這個網站的介紹專題頁出現。用戶在搜索時，可以根據關鍵詞直接搜索到這個網頁。
這個著陸頁也同樣是起著介紹專題的作用。
著陸頁也常被用介紹產品，這樣我們在搜索這個產品的時候，就可以更快的找到了。
很多情況下，網頁首屏的形式不斷地被強調，而首屏的功能性卻總是被忽略。這樣就會出現影響用戶使用的情況，因為網頁最重要的作用就是傳遞和收集信息。
所以設計師在設計一個網頁的首屏部分時，應該更多的去考慮這個網頁想要的提供的功能是什么，而不是一味的追求形式感。當然不同的行業，所要求的網頁的功能也是不同的。接下來的部分我們主要來探討一下這個問題。
一個網頁主要受到三個因素的影響。行業、功能和形式。這三個元素又在互相影響。
首先，行業決定了功能性。我們用醫療這個大行業下的，醫院類型、保健類型和醫學院類型的網頁來說明。
首先我們來看醫院類型的網頁，這種特定的行業類型，要求的網頁功能就會比較全面。
首先就是為了方便用戶提供的預約功能。
在這個基礎上，網頁中還會加入導航功能，這是為了讓用戶更容易去找到這家醫院。
網頁設計者還會添加問診功能來方便用戶直接進行查詢。
這個網頁我們就看得更加詳細了，同樣是添加了一個問診功能。
我們來總結一下，除了最基本的形象功能外，醫院類型的網頁還添加了預約功能、客服功能、導航功能和問診功能，其本質都是為了可以更好的服務客戶。
到了保健類型的網頁時，這個功能就會相應的發生變化，由于是保健的性質，更多是從招攬客戶這個點而出發的。
所以這類的網頁，雖然同屬醫療行業，卻有了不同的功能，這里更多的是發揮著這個網頁的形象功能，增加信賴感。
這個網頁則是直接把服務流程放在了首屏部分，可以讓用戶最容易地理解整個服務流程。
這個網頁也是同樣的設計邏輯，通過展示形象來吸引用戶。
保健行業的網頁，幾乎都存在著預約功能，這樣主要是提供了一個用戶和商家互動的渠道，也是契合這類型行業的實際需求。
最后我們來看一下，醫療學校類型的網頁。
因為是屬于教育行業，所以更多是一個形象功能的展示。
這個網頁是一個護士的招聘網站，他就用過輪播視頻的方式，讓用戶能最直觀地感受到護士這個職業的內容和價值。
教育行業的網頁，則更多的是一個形象功能，向客戶傳遞自己的價值觀。
前面說了行業決定功能，以此類推，功能確定著形式，我們主要以旅行行業的網頁進行說明。
這個網頁主要是向用戶展示環境以及服務，也就是我們前面說的形象功能，所以在設計的時候直接做了一個全屏的形式，最好地向用戶展示自己的信息。
這個網頁也是同樣的功能，展示自己的形象，將自己的景色展示出來，這樣可以讓用戶最直觀的看到。
這里則是在展示形象功能的基礎上，添加了一個預定的功能，網頁的形式也發生了一定的改變。
這里還可以將預定功能的形式放在頁眉和主欄的交界處，創造一定的層次感。
這是一個酒店的網頁，在設計的時候，添加了一個銷售的功能，這樣在設計的時候網頁形式也相應的進行調整。
而最后到了形式的部分，它并不決定任何事情，而是反過來促進行業。
化妝品的行業對網頁的美觀度要求很高，當我們瀏覽到這樣的網頁時，并不會增加我們購買的欲望，甚至這樣的網頁起到的是一個反作用。
而當我們就瀏覽到這樣的化妝品的網頁時，他是可以提升我們購買力的。
我們放在一起對比一下，是不是孰優孰劣就一目了然了。前面我們說了，行業決定著功能，功能決定著形式，形式反過來促進行業。所以最終呈現給用戶的網頁是一個多方綜合的結果。
在確定了行業和功能的前提下，就需要我們多去了解網頁的設計形式有哪些。這里，給大家介紹一下現在時下流行的設計形式——等分屏式。
等分屏式很容易理解，就是將網頁一分為二，AB 兩個部分，它們既可以展示相同的信息，也可以展示不同的信息。以這種形式設計的網頁，被稱為雙專欄型的網頁。
最常見的形式為一半圖片，一半文字。這就類似于我們的畫冊結構—— 圖字組合。
第二種形式則是，左右都有圖片，它們既可以說明同一件事情，也可以截然不同—— 圖圖組合。
第三個則是大圖小圖的對比形式，這種形式會賦予網頁一定的藝術感和時尚感 —— 大小圖組合。
圖字組合的形式，和我們在觀看畫冊習慣基本相同，一半圖片一半文字，可以很好的傳遞出網頁的信息，方便用戶理解。
這個婚戒的網頁，使用這個形式，更加增添了高級感。
它們也是可以左右進行一個對調的，這個網頁同樣是依靠這種形式，傳遞出一種簡約高級的感覺。
這個網頁使用的是圖圖組合的形式，左右照片連貫，講述的是一件事情，給用戶一定的聯想和視覺沖擊力。
這里左右選擇的是一個關聯性的圖片， 創造了一定的故事性，同時也傳遞出來這個網頁的產品。
大小圖組合，更加可以凸顯出來網頁的時尚感。
上述的三種組合，并不是永恒一成不變的，就拿圖圖組合來說，我們可以通過移動網頁的分割線，創造出很多形式?？梢赃x擇縮小圖片的范圍，更多的去展示文字的信息。
也可以選擇放大圖片，這些大家都可以根據實際的需求進行操作。
大小圖的組合，也可以不局限于規規矩矩的排列形式。
我們也可以在規則內，任意移動小圖來創造出新的感覺出來。甚至可以將小圖拆分，創造出更加活潑的版面結構出來。
這個飾品的網頁就是利用這種形式，多角度的展示了自己的飾品。
這個網頁則是用這種形式，創造出一定的故事性，提高用戶繼續瀏覽這個網頁的興趣。
我們也可以更進一步的，把大圖也調整，重新布局在頁面中，就可以創造出更多的版面形式了。
使用這個形式的網頁，提升這個網頁的活潑度和設計感。
這樣調整了圖字組合和大小圖組合，我們就可以得到了 5 種完全不同的形式網頁了。
通過上面的思路，我們也可以嘗試去結合不同的組合，也可以創造出很多新的形式。更多的組合形式就需要小伙伴們自己去嘗試和發現了。
到這里大家有沒有一個感受，就是網頁設計其實是可以非常靈活的，形式也是多種多樣。
文章來源：優設 作者：研習社
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：對于不少企業來說，數字化轉型是一個新鮮事物，因此大家都是在摸著石頭過河。由于數字化轉型是極其復雜的系統工程，因此企業在轉型過程中難免會遇到各種問題。在本篇文章中，作者為我們分析了數字化轉型的本質是什么。
數字化轉型如火如荼，但很多企業并沒有意識到數字化轉型的本質是什么？數字化轉型到底要去向何方？
有的企業在數字化轉型上，高舉高打，重兵投入；有的企業拿出部分業務散點嘗試，但企業上上下下，誰也不知道數字化轉型要弄出個什么吉祥物；有的企業一臉不屑，心里嘀咕著這社會怎么了，滿嘴跑火車，盡出些不著調的新詞。
不管大家對數字化轉型抱著什么樣的心態，最重要的是在企業管理層形成“數字化轉型的本質是生產力、生產關系的重構”的共識。有的朋友可能會說，“形成共識，這怎么可能？每個人對數字化轉型的想法都不一樣，哪可能形成共識？又為什么你說的就是對的？
所以，這里有兩個問題：
漁歌嘗試分別回答這兩個問題。
因為數字化轉型牽一發動全身。數字化轉型即是一把手項目，也不光是一把手項目。數字化轉型涉及人、錢、設備，和企業的市場、業務、產品、技術、財務、法務各團隊相關，需要聯動各團隊的負責人、中層、一線工作人員。
如果各方不能達成共識，將導致數字化轉型項目走的身心疲憊、渾身踉蹌，走著走著累了，迷茫了，就更累了，更迷茫了。
大家都不知道數字化轉型到底要解決什么問題？跟自己的工作有什么關系？慢慢的，項目就擱淺了。所以，至少各團隊的關鍵角色們要對數字化轉型到底要達成什么效果，目標是什么達成共識。
然而現實往往是，企業高層指點江山，認為數字化是新方向。企業中層忙著拆解，而后各自領會任務，再向下傳達，同時看看有沒給別人埋坑，和有沒被別人埋坑。
企業一線員工接到的是已經被拆解成一顆顆螺絲釘的任務，面對沒有前言、沒有后語的任務，一線員工一臉懵逼，心里想著老板怎么這么傻，花這么多錢干沒意義的事。
類似這樣的數字化轉型，轉來轉去，企業還是會回到數字化轉型前的狀態。
所以，在企業中那些在數字化轉型前就有的問題，數字化轉型后這些問題依然存在，而且還有了數字化轉型前沒有的新問題?；蛘咿D型轉了一半，項目不得不暫停，或者項目無法收尾驗收，那些數字化轉型的服務商們留下大把眼淚。
如果企業的掌舵者們沒有意識到“數字化轉型的本質是生產力和生產關系的重構”，并與關鍵人達成一致，那就是為了數字化轉型而轉型。為了轉型而轉型，則往往因為沒有目標，把自己轉暈，又回到原點，甚至倒退。
企業管理本是非常復雜的命題。數字化轉型和企業管理中的深水區問題天生即是朋友，又是敵人。
在很早之前，漁歌寫過一篇文章“數據的本質”。數據本身是一種語言，數據本身不產生價值。好比語言本身不產生價值，但語言一旦用來交流、傳承，便產生了巨大的價值。
語言如果不用起來，那就成為古老文明，就只有觀賞和研究價值。而語言一旦用起來，那文明就可以被積累、被傳承，就形成了知識、智慧，而知識和智慧可以在企業中打破組織、系統的邊界，被更廣泛的傳承、迭代。
數據這種語言，一旦在商業世界中應用起來，將會形成巨大的化學反應，這種化學反應就是對生產力、生產關系的重構。
數據化轉型之所以能重構生產力，是因為數據這種語言將在數字化轉型后徹底被激活。
數字在數字化轉型前就像一張張卡片，被丟在各個角落，彼此不知道彼此的存在，因為數據是零散的，沒有標準的，更沒有數據應用。而通過數據化轉型，這些零散、不標準的卡片被打通、被標準化、被打透，就可以變成音符、書籍、影視作品，甚至變成科學和一家企業的血液。
數據這種語言還有其他語言沒有的功能，就是會自我化學反應，或者稍微加點催化劑，很容易就被催化成其他神奇的力量。因為自動或半自動話的數據分析、數據智能能打破人和組織的盲區，自動識別、定位問題，甚至自動解決問題。
所以數據化轉型重要價值之一是將原本被零散丟棄、沒有標準的數據通過數據采集、數據治理、數據加工，生成各種數據應用，包括但不限于有觀賞價值的數據大屏、數據可視化、數據分析、數據AI。因為通過數據可以發現，很多沒有被發現的客觀事實、問題，并找到解決辦法。
比如數字化轉型后，終于能及時在線看到渠道的串貨問題有多嚴重，到底從哪串到哪了，勁兒精準打擊。
也比如通過數據發現，原來線下經銷商搞活動，還能把線上銷量帶起來，導致線上經銷商也缺貨了，消費者、渠道商這么聰明，價格的風吹草動就能快速去搶市場機會，這是很多管理者之前沒有意料到，那如何線上、線下一盤棋，進而驅動企業渠道管理的優化；
再比如數據化轉型前，需要看一個數據的時候，需要從總部到大區再到省市，層層追問，不光等拿到數據結果就已經2個星期過去了，還得設置幾個、幾十個這樣的市場專員來搜集數據，對企業來說，人和時間就是生產力。
所以數據化轉型在生產力上提供了多重幫助：
所以數據化轉型使以前依賴人的生產力，變成可以自動化、AI化，數據變成了企業的重要生產要素和生產力，拍腦袋決定的事變的越來越少。
因為數字化轉型打破了原來的信息隔離和信息壟斷，使得人和人之間的合作，部門和部門之間的合作變得更透明、通暢。
每個人都有的自己的目標、利益、盲區，每個團隊也有自己的目標、利益、盲區，容易造成企業內部合作困難、企業內外部合作困難。企業內耗、內卷，無處不在，這是很多企業數字化轉型的底層驅動力之一。
有時候，人與人或部門與部門之間不愿意合作，因為各自的屁股不一樣，利益不一樣。單從企業的角度來說，需要提高更多的人和團隊的合作意愿和合作效率，而數字化轉型在打通企業全鏈路數據之后，使得企業中人和人、團隊和團隊，內部和外部的合作變的有更大可能性：
一方面團隊和團隊之間的盲區打開了，大家開始多了一些互相理解，另一方面，很多管理問題可視化之后，好的、不好的開始逐步暴露，遇到問題后，推脫或者不合作的理由開始越來越難找，所以逼著大家要合作。
也有時候，人與人或部門與部門之間想合作，但不知道該怎么合作，到底怎么做才是專業的，沒有人知道，誰都不服誰。而這也是數字化轉型能解決的問題，專業的數據應用是解決問題的辦法之一。大家看同一份數據，用能高度達成一致的方法和目標，去解決同一個問題。
所以數字化轉型將打破企業內部、內外部合作中原有的邊界。一旦打破，相當于在企業中重新對生產關系進行了重構，以前那些很強勢的前臺團隊變的開始尊重后臺支撐團隊，后臺支撐團隊開始理解前臺團隊的不容易，甚至有可能前后臺團隊合并成一個團隊，這種調整都取決于實際業務和管理需求。
同時，數字化轉型不是建個數據倉庫、上一堆數據應用就結束了的事。數據從零散、非標準化的形態，被標準化的鏈接、應用起來后，也就是形成了生產力，但這種數據生產力只有用起來才能成為生產力，也就是需要生產關系的驅動。
沒有數據化的運營，數字化轉型也只是一個靜止的工具。數據化運營才能真正發揮數據的生產力，而數據化運營就是一種生產關系。很多企業，沒有配備數據化運營的崗位，或者負責運營的人不懂數據，不懂數據化運營，或者內心鄙視數據化運營，那數字化轉型是白搭。
所以真正發揮數據化轉型的力量，就需要與之適應的生產關系。
數字化轉型是一種由內而外的自我變革，利用數字技術的變革。這種變革的核心是提高生產力，改善生產關系，解決以前解決不了的問題，或者用更低的成本去解決以前的問題。同時，發現以前沒有注意到的問題和市場機會。
新的生產力需要與之適配的生產關系。
文章來源：人人都是產品經理 作者：西湖漁歌
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
管對用戶體驗很重要，但空狀態經常被忽略。知道它們是什么以及如何使用它們，應用于UX最佳實踐，可以產生很多好處。
什么是空狀態？
UX設計師有很多機會來創造愉悅而有意義的體驗。一種經常被忽略的機會是“空狀態”或空白屏幕?？諣顟B是用戶體驗產品時無法顯示的時刻。
以下是一些常見的空狀態情況的示例：
A. 一個新的Dropbox屏幕，其中未創建任何文件或文件夾。
B. 在待辦事項列表管理器中完成所有任務后的結果屏幕。
C. 不支持命令時，在Slack中顯示錯誤屏幕。
D. 啟動一個新的社交帳戶，并且沒有任何連接。
E. 在Gmail中搜索內容，但沒有結果。
這些介于中間的時刻提供了改善用戶體驗并因此擴大商機的機會。對于UX設計人員而言，抓住一切機會來改善用戶體驗并為業務增加更多價值是一件好事。
一個有用的空狀態將使用戶知道發生了什么，為什么發生以及如何處理。這是良好的空狀態UX設計的兩個示例：
在首次啟動產品時，Dropbox Paper為用戶提供了良好的空狀態界面。號召性用語按鈕可幫助您繼續使用，而不必擔心下一步該怎么做。
搜索查詢不返回任何結果時，空狀態界面設計的一個很好的例子。該界面提供有用的參考，并讓用戶知道發生了什么。
以下是一些機會錯誤的空狀態設計示例：
這是一個空狀態的界面，可以提供一些反饋，但是卻錯過了向用戶提供任何其他指導或要采取措施的機會。
在這種空狀態的界面中，我們只是看到一個幾乎空白的網頁。圖像本身很棒，但是它不會引導用戶沿任何特定路徑點擊，也不會通知或指示用戶。
空狀態的類型
這是四種常見的空狀態：
A. 首次使用–在沒有其他內容可以顯示時，例如新的Evernote或Dropbox帳戶，發生在新產品或服務上。
B. 用戶已清除–在用戶完成諸如清除其收件箱或任務列表之類的操作且結果為空白屏幕時發生。
C. 錯誤–發生錯誤時或由于網絡問題而導致手機脫機等問題時，會發生這些錯誤。
D. 無結果/無數據–在無內容顯示時發生。如果有人執行搜索并且查詢為空或沒有可用數據顯示（例如，在篩選沒有數據的日期范圍時），就會發生這種情況。
隨著空狀態設計受到越來越多的關注，UX設計人員發現，從業務和用戶體驗的角度來看，利用它們都有有益的結果。
使用設計良好的空狀態的好處
設計周到且有用的空白狀態屏幕可以幫助提高產品參與度，使用戶滿意并減少用戶流失。
Scott McKain在他的《客戶真正想要什么》一書中提出了出色的客戶體驗的六個指導原則。
a. 引人入勝的體驗
b. 個人重點
c. 相互忠誠
d. 差異化
e. 協調
f. 革新
當將這些原則應用于空狀態設計時，它們可能對企業非常有益-例如，提高產品滿意度和降低放棄率。
以下三個方面也可以從良好的空狀態設計中受益：
A. 用戶入門–除了增強的用戶體驗之外，還提供了建立信任和繼續使用產品的機會。
B. 品牌建設–產生知名度并提升公司形象，以建立更多的品牌資產。
C. 個性化–在各種使用狀態下都有趣或充滿活力；營造一種個人風格的感覺。
設計良好的空狀態的好處不可低估。它們不僅為引人注目的客戶體驗做出了貢獻，而且隨著客戶滿意和參與的機會窗口越來越短，它們可以說是非常好的體驗。
如何用目的填充空白屏幕
以下是一些UX最佳實踐，可確保將空白屏幕設計為有用的信息。
共情。UX設計師即使在產品的最黑暗角落也能創造出更好的體驗，這一切都增加了驚喜。對于空屏幕，同理心的消息傳遞增加了多樣性，并創建了一種更具吸引力的個性化體驗。
Gusto是用個性化和一些有趣的個性填充空白狀態屏幕的一個很好的例子。
意象。有一種設計原則稱為親生物效應。從自然角度看，這是一種減少壓力和提高注意力的狀態。添加一些風景圖像（例如，空狀態錯誤屏幕的背景）可以帶來更愉悅的用戶體驗。
圍繞親生物效應設計的空狀態屏幕可通過減輕壓力和幫助參與而對用戶體驗產生積極影響。
正確的指導。根據產品類型的不同，可以使用空狀態來指導用戶。一個很好的例子是項目管理應用程序。使用新帳戶后，尚無任何項目在進行中，這為幫助用戶快速入門提供了潛在的絕佳機會，從而減少了放棄的機會。這是一個例子：
Evernote在引導用戶使用其空狀態頁面設計方面做得很好。
入門內容。有很多屏幕空白的時間足夠使用戶感到沮喪和離開。對于某些產品，提供良好的入門內容有助于他們直觀地了解正在發生的事情以及下一步可以做什么。
這是帶有啟動程序內容的空白狀態屏幕的示例：
它為用戶提供了基礎，并減少了產品混淆和遺棄的機會。
提供一個行動步驟。對于某些產品，我們不需要提供指導或在屏幕上填滿任何內容，因為這沒有任何意義。在這種情況下，設計人員可以簡單地提供一個動作步驟。
但是，最好將動作減到最少。希克定律指出：“做出決定所需的時間隨著選擇的數量和復雜性而增加?！?因此，當號召性用語最多保持一兩個時，用戶可能會更快地采取行動。這是一個很好的例子：
它告訴用戶采取措施，但仍將其保持在最低水平。
另一個很好的例子是Instagram。當人們不熟悉該平臺時，他們還沒有關注任何人（也沒有人關注他們）。專注于Instagram的所有出色功能很容易，但是，一個良好的空白狀態屏幕可以為他們提供“添加要關注的人”的選項。
當首次使用該平臺時，Instagram用戶會以一種快速便捷的方式來尋找人。
結論
在UX設計中很容易忽略空白狀態（或空白屏幕），因為它們很少發生并且并不總是很容易理解。但是，將它們包含進來的好處被低估了，因為它們可以增強用戶體驗并幫助創建更具凝聚力的產品。
文章來源：站酷 作者：對啊設計君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在平面插圖趨勢大放異彩之后，3D圖形又回到了主流，并在Web和移動用戶界面，插圖，動畫視頻和廣告圖形中表現出明亮而多樣化的性能。最近幾年，在不同的團隊和媒體資源對UI設計趨勢的所有眾多評論中都提到了3D藝術和動畫。因此，越來越多的設計師將它們集成到網站和登錄頁面中。
以上為Web端設計中的3D的圖形運用，希望可以給大家啟發，共勉。
文章來源：站酷 作者：對啊設計君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
數據可視化設計的一些技巧
一、什么是數據可視化
把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。
在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。
二、什么是大屏數據可視化
大屏數據可視化是以大屏為主要展示載體的數據可視化設計。
“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。
利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。
三、大屏數據可視化設計原則
設計服務需求
大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。
那什么是業務需求呢？
業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。
先總覽后細節
大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。
四、大屏可視化設計流程
1. 根據業務場景抽取關鍵指標
關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。
確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。
2. 確立指標分析維度
同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。
我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。
我們可以從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。
1.聯系：數據之間的相關性
2.分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
3.比較：數據之間存在何種差異、差異主要體現在哪些方面
4.構成：指標里的數據都由哪幾部分組成、每部分占比如何
3. 選定可視化圖表類型
當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里，篩選出最能體現我們設計意圖的那個就好了。選定圖表注意事項：易理解、可實現。
易理解：
就是可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
可實現：
（1）我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。
（2）我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難。
所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
4. 制作圖表
當確定了要使用哪些圖表做圖后，開始進入制作流程，影響最終圖表展現效果的元素一般分為兩個層面：
非數據層：
不受數據影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對于這類元素，應該盡量隱藏和弱化。
隱藏
·去除不必要的背景填充
·去掉無意義的顏色變化
·去掉不必要的外框
弱化
·坐標軸淡色或隱藏
·網格線淡色或隱藏
數據層：
受數據影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數據息息相關，一旦圖表本身的數據比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的數據，是否就完全無法操控這些元素了呢？
精簡數據項
在做數據報告時，不管有多少數據項，為了完整和精確性，所有的內容都會顯示出來，但在大屏中，如此滿的數據展示，不但忽略了視覺體驗，還會讓用戶抓不住重點，對于餅圖來說，建議扇區個數不要超過5個，例如保留占比前5的扇區，剩下的非重點數據全部歸到“其他”。
保留前五或后五
如果柱狀圖的數據項過多，展示時會過于密集，建議先把數據項按照數值大小排序，只保留前五或后五的數據項。
5. 頁面布局、劃分
尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
6.可視化設計
根據選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有：指標類信息點和地理類信息點兩大可視化數據。
指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。
地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。
數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數據的展示。
7.樣圖溝通確認
樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。
因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：
1.之前確立的布局在放入設計內容后是否依然合適；
2.確立的圖表類型帶入數據后是否仍然客觀準確；
3.根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
4.已有的樣式、數據內容、動效等在開發實現方面是否存在問題；
5.大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。
大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現。所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。
8.頁面定稿、開發
事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。
一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。
9.整體細節調優與測試
這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。
視覺方面的測試：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。
五、大屏設計的注意事項
1. 字體使用
字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。
如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字
2. 顏色搭配
（1）色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色
3. 頁面布局
主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割。
六、問題
設計稿投到大屏上顯示效果不佳怎么辦？
大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。
因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現。如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。
文章來源：優設 作者：Captain相
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一些日常工作心得 總結
隨著工作年限的增加，項目經驗的豐富，在能力提高的同時，設計師更應該注重團隊管理能力上的提升，互聯網公司不論規模大小，但基本的開發流程是大致相同的，基礎配備崗位如下：產品經理、UI設計、前后端開發工程師。測試人員配置不一定有，所以這邊就不列入了。以上是最基本的人員配置，該有的流程并不可少，今天我拿目前所在公司的日常工作流程聊聊心得，有時間你就慢慢往下看。
各崗位的工作流程如下：
根據流程圖我們很清楚，哪些任務是優先可以發起的，哪些任務是上一個做完才能開始的。今天重點介紹在設計環節，作為一個設計leader，是如何開展并推進的任務的。
一：需求原型理解階段
設計環節前期，設計師會收到來自產品經理的原型圖，以及需求文檔，這時候作為leader的你，首先應該了解整個產品的架構與邏輯，并且通過口頭交流、書面記錄的方式，把你的疑慮與產品溝通進而了解最終目標。只有你自己搞清楚整個產品邏輯與目標，后期才能對其他協同設計的人員遇到難題時，進行一些思路梳理。
二：交付原型于協同人員
通過第一階段，你已經明白了整個產品邏輯和目標，這時候你就可以將原型圖派發給其他協同人員，讓他們先瀏覽理解，并在必要時給出相應疑慮講解，幫助其理清思路。
三：出主視覺風格設定稿
第三階段，你通過對需求的分析，對競品風格的探索，出具2種主頁面風格定向，并提交上級領導審定。這里注意的是，并不是越多種風格越好，一定是你經過一系列思索后，給出2版你認為最有說服力的即可。
四：啟動設計
風格落定后，你應制定一套視覺規范，對于大多數小伙伴來說很疑惑，我也疑惑過。你還沒設計，怎么知道你真正想要的是什么顏色什么字號？這里我建議是，部分設計稿出來再做規范，然后慢慢的完善。但是起初一些基本的樣式，包含顏色、字體、柵格系統等基礎規范，是可以先落定的。并根據原型統計頁面，進行任務分配，并溝通完成時間。
其次對于一些內置組件，比如展示型圖標、底部tab切換，盡可能讓同一個人來負責，便于風格走向統一。至于一些內部動效，可根據團隊成員擅長領域進行分配，例如我對交互動效比較擅長，我就可以負責這塊。
注意事項：為確保設計規范統一規范，統一藍湖協作工作流（每個公司協作平臺不同），參與設計協作人員，設計過程中新增組件樣式應及時告知協同人員（以免出現你新增了，對方不知道，造成多種樣式情況）
五：任務排期表
通過使用甘特圖進行排期，不僅對于你可以了解整個設計進程，同時也讓領導清楚項目進度。
六：UI前端配合調試階段
頁面都設計好了，好記性不如爛筆頭，以每個?？鞛閱挝?，記錄下你的整改意見給到開發，記得給他捶捶背，真的很幸苦也很煩心的一件事情。其實對于頁面還原度問題，心里要有個數，95%還原，就很棒了，我有時候也不會死磕太細小且不重點的地方，尤其在項目緊急時候，把重心放在測試bug上更為重要（忽略我的字跡，字丑人還好）
七：總結
人物結束，進行一個復盤，哪里環節不夠順暢，是溝通問題，還是效率問題，都可以記錄下來，下次改進。
文章來源：優設 作者：我是黃爍啊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品設計的初期，為了讓產品覆蓋到更多終端，需要對網頁設計進行響應式和自適應設計，制定界面適配規則時，你是否也有過如下疑問
寬度單位我是用百分比還是px？還是rem？區別是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素？瀏覽器窗口大小和設備大小和分辨率大小區是什么區別？
什么是響應式網站，自適應又是什么？兩者有何區別和聯系？
百分比寬度布局和流式布局和前者的關系是什么？
既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發了一個移動端版？這里面有那些坑需要避開？
歷史長廊
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞--漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：
即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。
結合自身產品用戶訪問瀏覽器分辨率
鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下
靜態式布局：
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
自適應布局：
用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。
彈性布局：
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
流體式布局：
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
響應式布局：
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。
否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
選型
如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題。總之，根據場景響應式可以從各種層面，各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
實踐與技巧
首先，我們需要了解幾種分辨率的差別。
ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率
以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
左側的可視區代表整個屏幕小于960px時的具體布局和內容
右側的可視區代表整個屏幕大于等于960px時的另一種布局
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
刪格
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
1. 列和槽（Columns and Gutters）列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。
2. 頁面邊距（Side Margins）頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
3，用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D
4，斷點是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
5，網格規則，列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
6.流體柵格與混合刪格
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
文章來源：站酷 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做設計、做交互、做產品前都離不開一個目的就是——拆解問題，達到XX預期，從而能提升自己的專業性，讓方案更加具有說服力。那么，設計師應該如何找到符合自己的設計方向和優化方向呢？
案例：
如果不去拆解問題，你知道后續的該怎么做嗎？
設計拆解：想要找到設計方向和優化方向的，請你一定要看！
我們知道了最直觀的感受信息度和社交能力弱，但是這 2 點并不能作為優化目標和設計策略。
從該截圖來看，滿足了：
1. 信息是不是很滿？
那么如果不去拆解問題，是不是就不知道如何補充信息了，那么也有社交感。用戶在主動狀態下：漂亮、萌妹、聲優也就有社交了，那么用戶在被動狀態下是什么？
2. 是不是越想越亂，找不到方向了？
這就需要去拆解問題了，可以讓你的思路更加清晰，保持在一條線上，形成大綱，可以挖掘更多的價值。
還是同樣的案例：
那么背景交代的是需要強化社交關系提升信息豐富度和社交感。經過再一輪的拆解，是不是能感覺到，自己思考的方向也多了？
我拆解問題后，獲得的好處有：
1. 思維的擴展性
舉個例子：信息豐富度為什么會讓我覺得缺少一點靈活性？信息的展示，會不會又分為外在和內在信息？那么什么是外在信息？與同平臺上的大神之間建立的關系轉化為信息？
2. 邏輯的嚴謹性
3. 產出結果的可視化
可以根據拆解，將問題變得更加清晰，從而找準發力點。
前面鋪墊了那么久，現在回歸正題拆解問題主要分為 2 種（對應著初級和中級水平，可視情況任選一種）：
還是以這個案例：
△ 這是提升信息度的模塊，問題樹太長，就只展示部分了
△ 這是提升社交感的模塊，問題樹太長，就展示部分了
挖掘到以下功能（列舉功能并記錄，進行權重分析）：
這是一個很淺的影響因素分析，到了這一步，很多厲害的小伙伴，甚至會更加詳細。也就是說我們要將方向點，統統轉化為機會點和業務新方向（那些一直抱怨沒有發言權的小伙伴可以參考一下）。
（全局問題樹展示-舉例就不做詳細展開了，理解意思就行）
整合內容進行歸類
拆分和定位分為：
整合成一個表單：
重復確認問題我們找到上級確認：是否與上級規劃的方向保持一致，不合適也能及時作出修改。
資源規劃根據權重比，進行資源規劃。適用場景對于剛上手的小伙伴，請耐心的一步步做完，老鳥的話請直接一步到位。
這一塊的內容需用到用研部分知識，以數據為主用研為輔的情況下去進行拆解問題。相對來說，流程會更加的長，但是獲得的結果更為準確一些或者說更加偏向用戶想要什么。
流程漏斗數據圖
還是以這個案例：（背景需要改動一些）
背景：某 APP 作為游戲類興趣社交 APP，個人主頁作為了解他人、建立社交關系的核心一環，目前信息豐富度和社交感偏弱，故需要進行優化 。（改為：導致流失率偏高，下單轉化極低）
目標：頁面改版核心以社交為驅動，豐富頁面信息，提升用戶建立社交概率。（添加：提升用戶建立社交概率，從而能提升用戶粘性降低流失率）
第一步：拉取數據（某一時間段，瞎編的基礎點擊事件埋點數據，看個意思就好）
△ 假的有點過分了，嘿嘿
第二步：進行梳理
先進行大綱梳理（以業務流程為主，梳理出主要問題）
△ 以用戶直接進入個人主頁舉例
第三步：假設驅動即解決復雜問題時盡可能的先找到一個合理的假設。比如：剛進頁面就流失，甚至停留時間都很短，那么你立馬給出的結論是：
TA 真丑，不符合我的審美，嚴重 P 圖。
第四步：找到用戶做這類測試的時候，當然一定要去找玩游戲的用戶且接觸過陪玩的。用戶找到-約時間-去用戶能放松的地方-開始瀏覽該軟件-進行定性測試。
第五步：匯總結果定性的方式有很多種：這里我舉例一個「think aloud」：
使用 think aloud 的流程：
最后在經過數據分析得出問題的優化重點或改版方向。
補充一句，如果條件允許，使用卡片分類法，讓用戶自主的搭配，個人主頁中功能位置。
小結：熟練分析話術，圈重點，找到核心的發力點。也能讓思考過程更加結構化、可視化。不同的話術下，找到不同的方式，幫助快速解決問題，找準切入點和挖掘機會點和后續的跟進（要玩的流暢就取決于你的樹結構的清晰程度了）。
策略其實在你分析的時候就已經產生了。
當然啦，我們是一個 team，當你產生策略的時候，需要和團隊內共同討論方案的可實行性。
1. A/B testing
進行原版和改版數據對比，重點/想改進的數據有沒有提升/下降就好了。
AB 測試就是指把少部分用戶分成平均的兩組，其中一組用戶體驗網站改版的 A 版本，另外一組用戶體驗網站改版的 B 版本，分別記錄清楚相關的所有用戶操作數據以后再進行精確的比對，最后分析得出哪一個版本是用戶最喜愛的。
2. 灰度
灰度發布則是指在新的功能上線以及沒有上線之間能夠保證新的版本可以穩定過渡的一種發布方法，可以在灰度發布的過程當中解決一些問題或者對新版本做出一些可以提高用戶體驗的調整，這是保證網站可以平穩更新到新版本的有效過程。
文章來源：優設 作者：七月Xavier
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
n 次比較相鄰兩數并交換找到最值，然后 n-1 次比較找到次值……較小的數字像氣泡一樣浮出。
這里我引入flag排除，已經有序卻一直遍歷
function bubbleSort(arr){ const n=arr.length; let flag=1,i,j; for(i=0;i<n-1&&flag;i++){ //最壞的情況需要依次比較出最小值、次小值、次次小值 flag=0;//如果交換了就變 for(j=0;j<n-i-1;j++){ if(arr[j]>arr[j+1]){ const swap=arr[j]; arr[j]=arr[j+1]; arr[j+1]=swap; flag=1; } } } return arr; }
和冒泡原理相似，但是少了很多交換，多了一個暫存最值的空間。
n 次比較相鄰兩數后最多只交換一次將最值放到位置上，然后 n-1 次比較找到次值
冒泡更適合基本有序的序列
function selectSort(arr) { const n=arr.length; let i,j,minIndex; for(i=0;i<n-1;i++){ minIndex=i;//先決定誰最小 for(j=i+1;j<n;j++){ if(arr[j]<arr[minIndex]){ minIndex=j; } } if(minIndex!=i){ const swap=arr[i]; arr[i]=arr[minIndex]; arr[minIndex]=swap; } } return arr; }
平均時間復雜度=O(n logn)
function quick_part(arr,left,right){ //留下left和right后面遞歸 var l = left; var r = right; var basic= arr[left]; //arr[left]即basic的原位置 if(left >= right){ //如果數組只有一個元素 return; } while(l!=r){//兩者相遇，意味著一直到找到basic的位置 while(arr[r] > basic && l < r){ //l<r隨時注意嚴格控制哨兵不能錯過，從右邊向左找第一個比key小的數，找到或者兩個哨兵相碰，跳出循環 r--; } while(arr[l] <= basic && l < r){ //這里的=號保證在本輪循環結束前，key的位置不變，否則的話跳出循環，交換l和left的位置的時候，left位置的上元素有可能不是key l++; } //1、兩個哨兵到找到了目標值。2、j哨兵找到了目標值。3、兩個哨兵都沒找到(key是當前數組最小值) if(l!=r){ //交換兩個元素的位置 const swap = arr[l]; arr[l] = arr[r]; arr[r] = swap; } } arr[left] = arr[l] //arr[left]即basic的原位置 arr[l] = basic; quick_part(arr,left,l-1); quick_part(arr,l+1,right); } function quickSort(arr){ quick_part(arr,0,arr.length-1); }
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
轉自：csdn 作者：tututu333
從上往下執行，非常簡單，不做過多贅述。
與c語言不同的是，java的if(布爾表達式)必須是布爾表達式
eg:判斷某一年是否是閏年
public static void main(String[] args) { Scanner scan = new Scanner(System.in); int year = scan.nextInt(); if((year%4==0 && year%100 !=10)||(year%400==0)) System.out.println("閏年！"); else{ System.out.println("不是閏年！"); } }
基礎語法：
switch(整數|枚舉|字符|字符串){ case 內容1 : { 內容滿足時執行語句; [break;] } case 內容2 : { 內容滿足時執行語句; [break;] } ... default:{ 內容都不滿足時執行語句; [break;] } }
面試問題：
不能做switch參數的類型有哪些？
long float double boolean
注意事項：
public static void main(String[] args) { int i=1; int ret=1; while(i<=5) { ret *= i; i++; } System.out.println(ret);
public static void main(String[] args) { Scanner scan = new Scanner(System.in); int num = scan.nextInt(); int sum=0; for(int j=1;j<=num;j++){ int ret=1; for(int i=1;i <= j; i++){ ret*=1; } sum+=ret; } } }
基本語法：
do{
循環語句;
}while(循環條件）
先執行語句再判斷循環條件。
注意事項：
方法就是一個代碼片段. 類似于 C 語言中的 "函數“。
方法：功能
public static 返回值 方法名（形式參數列表){
方法體;
}
方法名：要采用小駝峰的形式，maxNum
public static:因為當前所有的方法寫完之后會在Main方法中調用。
方法體：就是具體方法的實現。
public static void main(String[] args) { int a = 10; int b = 20; // 方法的調用 int ret = add(a, b); System.out.println("ret = " + ret); } // 方法的定義 public static int add(int x, int y) { return x + y; }
方法的重載：
1.方法名相同
2.返回值可以不同
3.參數列表不同（參數的個數和參數的類型不同）
4.必須要在同一個類當中。
eg:
public static void main(String[] args) { int a = 10; int b = 20; int ret = add(a, b); System.out.println("ret = " + ret); double a2 = 10.5; double b2 = 20.5; double ret2 = add(a2, b2); System.out.println("ret2 = " + ret2); double a3 = 10.5; double b3 = 10.5; double c3 = 20.5; double ret3 = add(a3, b3, c3); System.out.println("ret3 = " + ret3); } public static int add(int x, int y) { return x + y; } public static double add(double x, double y) { return x + y; } public static double add(double x, double y, double z) { return x + y + z; } }
方法的名字都叫 add. 但是有的 add 是計算 int 相加, 有的是 double 相加; 有的計算兩個數字相加, 有的是計算三個數字相加.
同一個方法名字, 提供不同版本的實現, 稱為方法重載
一個方法在執行過程中調用自身, 就稱為 “遞歸”。
遞歸相當于數學上的 “數學歸納法”, 有一個起始條件, 然后有一個遞推公式。
遞歸：
1.要調用自己本身。
2.要有一個趨近于終止的條件。
3.推導出遞歸的公式。
eg:求N的階乘
public static void main(String[] args) { int n = 5; int ret = factor(n); System.out.println("ret = " + ret); } public static int factor(int n) { if (n == 1) { return 1; } return n * factor(n - 1); // factor 調用函數自身 }
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
轉自：csdn 作者：flyyyya
藍藍設計的小編 http://www.syprn.cn