那些頁面排版需要了解的事情

好文章,記錄一下;資料來源: 奧革設計

http://blog.ogdesign.tw/na-xie-ye-mian-pai-ban-xu-yao-liao-jie-de-shi-qing

些頁面排版需要了解的事情

排版是什麼？

排版是將文字、圖片等元素在版面調整，使版面佈局條理化的過程。一般來說，透過來版，讓人們更容易的去閱讀、接受這些提供給他們的資訊。

為什麼要提供良好的排版？

一個良好的資訊傳遞需要幾個要素來達成，分別是對的內容與對的方式以及對的人，唯有這三個要素都成立的時候，資訊就能夠有效率的被使用者給接受。排版扮演著內容與使用者之間溝通的橋樑，良好的版面設計讓使用者不需要特別的努力、訓練就可以了解提供的內容；相反，糟糕的排版可能會讓使用者拒絕接受這些內容。

排版最重要的四個要點

排版設計中有非常多需要注意的細節，各種細節也會因為不同的情境、需求而不同，底下列出了四項排版最重要的要點，如下：

1. 對齊（Alignment）

任何東西都不能隨意擺放，每一個元素之間都有某種視覺關係。利用對齊建立一個清楚整齊的外觀。

2. 親密（Proximity）

彼此相關的內容應靠在一起，反之不相關的內容保持距離。利用親密性，強調畫面的組織與架構。

3. 重複（Repetition）

重複視覺要素的顏色、字體、大小、空間等，增強條理性，也增強了整體一致性。

4. 對比（Contrast）

避免頁面上元素太過相似，如果它們不同，哪就讓他們截然不同。讓重要的內容引人注目，讓使用者間看到它們。

參考資料：寫給大家看的設計書、完形心理學

文字排版要點

文字是內容的本質，人們透過文字、句子來闡述知識，讓我們透過了解文字排版，讓文字更容易被閱讀、被接受：

1. 使用適合閱讀的字體

字體大小與使用者螢幕大小、使用距離有關，清楚了解使用者使用的環境與習慣後，選擇一個適當的大小。

2. 選用適當的字體

有些中文字體的英文版本其實是不合適的，挑選與中文字體相對應的英文字體作為搭配的字體。

3. 設定恰當的行高

也就是「文字密度」，太擠的文字在換行時，眼睛不容易找到下一行的起點，較不容易閱讀。

4. 設定恰當的段距

清楚的段落區分，讓讀者可以清楚地了解現在正在閱讀的段落。

5. 注意段落的寬度

注意文字最後顯示的設備大小，太寬或太窄的段落寬度都會造成閱讀上的困難，一行文字以45字元~75字元是比較恰當的。

6. 清楚的區分標題與內文

使用對比的方式（例如顏色、大小、位置）將內文與標題清楚的區分開來。

從認知心理學看排版

• 人們會將鄰近的事物視為一體
• 紅色跟藍色放在一起容易疲勞
• 大寫文字難以閱讀
• 閱讀與理解是截然不同的兩件事
• 如果人們感覺這個字體不易閱讀，他們會把這種困難的感覺轉化至文意本身，並因此覺得文章所談到的內容難以執行或難以理解。
• 較長的欄寬能提高閱讀效率，但人們偏好較短的欄寬。
• 適時的應用進階展開，減少一次顯示的資訊數量
• 分類資訊
• 提供明顯的線索

  參考資料：了解人，你才知道怎麼設計

從設計法則學習排版

• 80/20法則
  不要對設計中所有的元素一視同仁。應該利用80/20法則來評估各元素的價值、鎖定重新設計與最佳化。
• 希克定律（Hick’s law）
  當選項增加了，下決定的時間也增加。
• 倒金字塔法則
  以重要性遞減的順序呈現資訊。先呈現最重要的資訊，之後才是附加的詳細資料。當呈現資料的效率很重要時，就使用倒金字塔法則。
• 提高信噪比
  同一顯示中，相關資訊與不相關資訊的比例，在不影響功能的原則下，必要元素應該儘量減到最少。
• 使用基本元素，讓使用者安心
  人們在數為世界的心智模型，常常是建立在對這些基本元素的了解，不管是網頁或者是App，畫面中的某些常見元素早已變成基本構成要素，使用者渴望或者預期他們能夠在網頁上看到些元素，已完成特定的任務，有安心的感受。
• 易視性
  只使用者於使用產品的過程中，能夠順利達成特定目標的容易程度，讓使用者可以看清楚產品的狀態，並且輕鬆推薦可以採取的動作。易視性決定了app該呈現的關鍵內容是什麼。
• 進階展開（Progressive Disclosure）
  進階展開主要強調提供給使用者當下所需要的內容，其他沒有助益的內容、控制項暫時不提供，直到使用者在各類別做選擇後，才展開更多的相關細節。
  利用進階展開的方式，可以減少使用者的認知負擔。
  把資訊內容歸納於少數幾個選項，在分階段漸漸釋出細節，簡要呈現當下所需的資訊，不只能降低使用者認知負擔，更可以避免豐富的選擇堵塞使用者的思緒。
• 分組（Grouping）
  完形心理學
  分組是一種組織資訊的技巧，將眾多的資訊依照特定方式分類為幾組，在同一組的內容相關性較高，不同組內容差異性大，面對龐大資訊時，可以利用這個方式減少壓迫感。

  參考資料：設計法則

從遙控器上學習排版

DVD 遙控器是一個極度複雜的工具，上頭除了電源、播放、暫停等基本功能外，還會參雜著其他各式各樣的功能，零零種種加起來大約有40多個按鈕，每個按鈕對應各種功能...
我們可以從以下幾種方式，來簡化複雜的遙控器：
- 刪除 - 去掉不必要的按鈕
- 組織 - 按照有意義的方式分組
- 隱藏 - 隱藏不必要的按鈕
- 轉移 - 轉移不必要的功能到其他地方

其他要點

• 儘量使用單列版型而不是多列版型
• 使用良好的預設值而不是給使用者選擇
• 使用良好的預設值減少使用者的操作
• 界面要有鮮明的對比讓使用者容易區分
• 精簡表單的內容
• 不要在頁面上放太多的連結，這樣會分散使用者的注意力
• 提供直覺的操作
• 不要過度使用邊框，這樣會讓界面四分五裂
• 使用基本元件而不是重新設計
• 將有關聯的事物進行分組
• 讓點擊區域大一點
• 如果提供太多的選擇，使用者反而一個都不會選
• 使用社群驗證的方式，讓
• 易讀的標題
• 易於閱覽的文本
• 善用留白，營造清爽乾淨的感覺
• 界面風格一致性很重要
• 注意文字的密度
• 突出畫面上重要元素
• 一圖勝千言
• 把文字看作是使用者界面（UI）的一部份
• 儘量不需要scroll就能看到主要的內容
• 藍色往往是最適合連結的顏色
• 搜尋框盡可能為27個字元的寬度
• 留白讓內容更容易被理解
• 大多數的人視廣告為無物
• 少即是多
• 限制頁面內容的長度.
• 參考設計規範
• 觀察界面的視覺動線
• 導航列要放在清楚的位置，如果導航列的項目是網站的核心，請勿必讓導航列出現在每一個畫面上
• 使用響應式設計
• 把重要的資訊放在列表的最上方
• 在輸入欄位旁提供提示、範例
• 在送出表單前進行欄位錯誤的檢查
• 讓使用者清楚知道點擊哪裡進行下一步
• 在所有的頁面上顯示你的服務名稱、Logo
• 避免使用全大寫的英文，除非是特別用來強調的標題內容
• 為各種設備調整適當的字體大小
• 你要考慮不同設備的閱讀距離的不同
• 把你的Logo放在固定的位置上，並確保點擊它能夠返回到最初的頁面

  Good UI : [https://goodui.org/]
  10 Useful usability findings and guidelines [http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/]
  How to achieve a good website layout [http://naldzgraphics.net/tips/how-to-achieve-a-good-website-layout/]

關於Label的位置

在表單排版設計中，標簽的位置如何擺放是一個很常見的問題，SitePoint上有一篇文章，完整地分析各種擺放的好處與壞處，非常值得閱讀。

[http://www.sitepoint.com/definitive-guide-form-label-positioning/]

圖片來源 : [https://www.flickr.com/photos/samodrole/5588196735]

不用廻圈組字串

又是記一下, 自己以後上來查方便的文章.

需求很簡單.
就是先select 出來的Table , 把Table 某一欄位值當字串組起來.


create table #tmp_listppl (empno varchar(7), ppl nvarchar(500))

 insert into  #tmp_listppl (empno, ppl) select '1',  cname from dbo.v_epaperauth

--這時Table 會長的這個樣子
-- 1,王大明
-- 1,張小芉
-- 1, 李大
 
declare  @list as nvarchar(500),@no as char(7)
set @list =''
set @no=''

update #tmp_listppl
set @list = ppl = (CASE WHEN @no <> empno THEN rtrim (ltrim(ppl))  ELSE @list + ';' + rtrim (ltrim(ppl)) END),
@no = empno



select empno,max(ppl)as auditno into #tmp from #tmp_listppl group by empno

select * from #tmp

--這時會這樣子  1, 王大明;張小芉;李大

drop table #tmp
drop table #tmp_listppl

記錄一下, 用Tree 架構轉階層..好文, 找了好久..

http://www.dotblogs.com.tw/caubekimo/archive/2010/07/20/16654.aspx

1. 設計資料庫欄位，包括左邊界、右邊界、PK、其他資訊等等
2. 編寫節點搬移、插入、刪除的SQL語法(我的做法是放到預存程序裡面再用ADO.NET呼叫)
3. 設計界面(我的做法是使用TreeView，至於Data Binding請參考這邊)

http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

這是java script 可以合併table 的!
http://www.redips.net/

如何清除Facebook 分享產生的catch

最近快要上線的網站, 有個新功能. 就是Facebook分享!

對! 分享連結出去到個人的FB裡.   很簡單的功能! 

但是Facebook 好聰明.把分享出去的meta data 給記下來了!!

只要有第一個人分享過. 對... 之後再連同網址的人分享. 也是像下圖錯的訊息

還好找到方法
只要到這個網址
https://developers.facebook.com/tools/debug

在上面輸入分享的連結. 就可以讓Facebook 重新抓取了!!
還好找到這個工具..

不然上線就慘了!

__dopostback 套 masterpage 不work

上週請同事教我用colorbox , 想要做的事情很簡單.
跳出一個視窗, 讓使用者選擇個選項後. 就依使用者選的選項.來做導頁的動作.

很簡單的事, 就碰上的莫非
用了一個linkbutton , 後端cs  寫導頁.
colorbox closed 的事件 , function 是呼叫postback 事件.

id="ctl00_ContentPlaceHolder1_LinkButton1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')"

因為知道有套Master page , 也知道Browser 會編過id,
我們也把呼叫物件的[LinkButton1]改成了[ctl00_ContentPlaceHolder1_LinkButton1]
 
誰知道Browser把呼叫的doPostBack 物件名稱 改為'ctl00$ContentPlaceHolder1$LinkButton1'
 
把function 中的呼叫名稱. 改為'ctl00$ContentPlaceHolder1$LinkButton1' 就可以了.(泣)
 
前端呼叫colorbox function如下:
function DoNew(link, ht) {


$.colorbox(

{ href: link,

iframe: true,

width: "80%",

height: "80%",

transition: "none",

opacity: "0.5",

width: "500px", height: ht,

innerWidth: "500px",

//onClosed: function () { location.reload(true); },

onClosed: function () { __doPostBack('ctl00$ContentPlaceHolder1$LinkButton1', ''); },

overlayClose: false

});

}
這Bug花了我二天時間. 一定要寫一下記下來!

C# & VB 程式碼互轉功能網站

下面網址有提供C#與VB互轉的功能，希望可以一勞永逸解決您的問題..

www.developerfusion.com/tools/convert/vb-to-csharp/

這網站真是不錯啊. 能幫上我這呆呆的人

Gridview 轉成excel

好久沒寫程式了. 開始斷斷續續的練功中.
昨天為了找一個excel匯出的東西. 試了一下, 一直有問題.
1.先參考下面的程式   
引用 網綕
http://www.wretch.cc/blog/genius0207/9646786




1.
好久沒寫電腦相關的東西了...../__\

ASP.Net匯出Excel檔        

1.新增按鈕，連點二下後進入.cs檔(程式碼)

2.在_click事件中貼上程式碼
       
private void btnProduceExcel_Click(object sender, System.EventArgs e)
 {        
        //產生的時間
        string ProduceTime = System.DateTime.Now.ToString("yyyy-MM-dd_HHmm");
        //從緩衝區清除所有內容輸出
        Response.Clear();
        
        //可以引入二個參數：("要加入 value 的 HTTP 標頭的名稱"," 要加入至標頭的字串")，也就是excel的檔名  
        Response.AddHeader("content-disposition", "attachment;filename=" + "" + ProduceTime + ".xls");
                         
        //設定輸出資料流的 HTTP MIME 類型
        Response.ContentType = "application/vnd.ms-excel";

        //取得或設定輸出資料流的 HTTP 字元集，輸出的excel出現亂碼時，可設定成"big5"
        Response.Charset = "";
        System.IO.StringWriter sw = new System.IO.StringWriter(); //宣告一個來裝文字(應該是喔~~)
        //宣告htw --> 將標記字元及文字寫入 ASP.NET 伺服器控制項輸出的資料流     
        System.Web.UI.HtmlTextWriter htw = new System.Web.UI.HtmlTextWriter(sw); 
           
        //新增一行標題  (將資料寫入 HtmlTextWriter 輸出資料流，後面接著行結束字元字串)        
        htw.WriteLine("excel內容---表格標題)");
         
        // dgInput是我在.aspx設置的一個datagrid 
        //將DataTable dtinput送給CreateTotalTable()接收資料庫資料後，指定給dginput 
        dgInput.DataSource = CreateTotalTable(dtInput);                      
         
        // dgInput為格式+資料，將 dgInput寫入htw裡。 (.RenderControl()-->將伺服器控制項內容輸出到提供的 HtmlTextWriter 物件)                  
        dgInput.RenderControl(htw);                      

        Response.Write(sw.ToString().Replace("
", "").Replace("
",""));//將資訊寫入 HTTP 回應輸出資料流。
        Response.End();//將目前所有受緩衝的輸出傳送到用戶端、停止網頁的執行，並引發 EndRequest 事件。 
}

找不到當初參考的頁面了QQ


2.出現  解決GridView使用RenderControl取得HTML出現的問題
  
又只好參考這個網頁. 就先解決了我寫程式的問題. 有時快和彈性.會被需求而忽略
http://www.dotblogs.com.tw/topcat/archive/2008/03/14/1336.aspx

如果想在CodeFile中取得GridView結果的HTML內容，首先會遇到這樣的錯誤訊息：

型別 'GridView' 的控制項 'GridView1' 必須置於有 runat=server 的表單標記之中。

這個問題，可以在您的CodeFile中加入以下這段來解決

    Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
        '處理'GridView' 的控制項 'GridView' 必須置於有 runat=server 的表單標記之中
    End Sub

如果您的GridView沒有設定分頁，應該就可以正常的執行了。但是如果有設定分頁，很快的又遇到了另外一個問題！出現以下的錯誤訊息：

RegisterForEventValidation 只能在 Render(); 期間呼叫

這個問題，可以設定aspx原始檔中<%Page%>的以下兩個設定解決

EnableEventValidation = "false" AutoEventWireup="true"

---

這樣的應用可以用再需要把資料庫的資料透過EMail寄送給使用者，如果自己組HTML語法是很累人的事情，可以透過這個方式，使用GridView產生HTML然後透過Email寄出

關於如何寄送EMail請參考以下這篇：

ASP.NET 2.0發電子郵件的範例