我并不是一个优秀的UI设计师，所以我认为我应该把这篇文章留给那些更擅长设计可用界面和有潜力看起来很好的人。
我在一个网站上有一个公共页面，有很多文案(如文案)。该部分由7个大部分组成。每个部分都有许多段落，可能还有一些图像。
现在，章节标题有点非常规，因为它们相当长——它们实际上是向用户提出的完整长度的问题。我猜他们的想法是，当他们浏览问题时，如果下面的段落适合他们，他们就会阅读。
如果我把所有的部分都放在一个页面上，这个页面就会变得很长。我不认为用户会向下滚动到问题5-7。
我不知道如何把这些"问题"放在传统的"左侧栏"菜单中，因为它只会在屏幕上垂直占据太多空间。
有没有人对如何设计这样一个页面有任何建议，以便它最大限度地减少或完全消除滚动，允许用户扫描7个问题，允许用户阅读所有的文本等非常容易?
我可以使用javascript，如果我需要。当涉及到UI时，我不是很有创造力，所以我不知道该做什么。这不是一个如何的问题——这更像是一个创造力的问题。我是一个服务器端程序员LOL。
如果你能在网上提供一些成功/盈利网站的例子来证明你的解决方案，那将是一个额外的奖励;)
谢谢!
您可以给每个问题一个标题(原始问题的简短版本)并折叠长版本。如果在标题前加一个"+"号，或者在标题下方加一个"阅读全文"的链接，就表示有更多的文本。
我建议把问题在一定数量的字符处截断，并在末尾加上"…"如果用户将鼠标悬停在文本上，则展开问题。
查看以下链接
- http://www.microsoft.com/visualstudio/en-us/products/2010-editions/ultimate
- http://office.microsoft.com/en-us/excel-help/create-or-delete-a-pivottable-or-pivotchart-report-HP010089893.aspx
- http://support.microsoft.com/kb/2267642
首页:左侧包含链接，点击链接将在右侧显示内容。
第二页:在顶部包含链接，点击链接将采取的内容，在内容的末尾有一个链接到顶部第三页:与第二页相似，但内容是可折叠的。
也可以使用accordian control (http://docs.jquery.com/UI/Accordion)。
对于上述所有解决方案，您可以使用norma javascript或JQuery。
我猜要求营销人员重新编写内容是不可能的(参见http://www.nngroup.com/topic/writing-web/关于为web编写的提示)。: -/
你可以考虑采用传统的目录设计。如果可以的话，调整文本，使最有意义和独特的单词出现在每个问题的左侧(即不要重复多余的信息)。如果有帮助的话，你可以加粗从每个条目中选取一到两个关键字来方便扫描(Google在其搜索结果中就是这样做的)。
目标是总结和促进正确的选择，然后允许用户导航到详细信息-如果你喜欢，你可以使用页面内锚链接。即使一页很长，也不会让人丧命;用户知道如何滚动(如果他们知道下面有东西可以滚动)。例如:
最适合我的情况是……
- 我未婚没有孩子，我也没有照顾生病的人。
- 我结婚了，我们没有照顾孩子或生病的成年人。
- 我结婚了，我们有孩子，但没有照顾任何成年人
- 我在过去的两年里丧偶，我有孩子要照顾。
- 我丧偶两年多了，我没有再婚，我有孩子要照顾。
- 我离婚了并支付子女抚养费。
我未婚没有孩子，我也不会照顾生病的人。
Lorem ipsum…
我结婚了，我们没有照顾孩子或生病的成年人。
Lorem ipsum…
<h1>The situation that applies most to me is...</h1>
<ol>
<li><a href="#x">I am <b>unmarried</b>, no kids, and I'm not taking care of of someone who's sick.</a></li>
<li><a href="#y">I am married, and we aren't taking care of kids or sick adults.</a></li>
<li><a href="#z">I'm married and we <b>have kids</b>, but aren't taking care of any adults.</a></li>
<li><a href="#a">I've been <b>widowed in the past 2 years</b> and I have kids that I take care of.</a></li>
<li><a href="#b">I was widowed <b>more than 2 years</b> ago, I haven't remarried, and I have kids that I take care of.</a></li>
<li><a href="#c">I'm <b>divorced</b> and pay child support.</a></li>
</ol>
<a name="x"></a>
<h2>I am <b>unmarried</b>, no kids, and I'm not taking care of of someone who's sick.</h2>
<p>Lorem ipsum...</p>
<a name="y"></a>
<h2>I am married, and we aren't taking care of kids or sick adults.</h2>
<p>Lorem ipsum...</p>