需要一些 Web UI 帮助 - 显示 7 个非常长的选项，每个选项都有很多内容
我不是一个优秀的 UI 设计师，所以我想我应该把这个推荐给那些更擅长设计可用且有可能看起来不错的界面的人。
我在一个网站上有一个公共页面，有很多副本（如文案写作）。该部分由7大部分组成。每个部分都有许多段落，可能还有一些图像。
现在，该部分的标题有点不传统，因为它们很长 - 它们实际上是向用户询问的完整问题。我想这个想法是，当他们浏览问题时，他们会阅读下面的段落（如果适用）。
如果我只是将所有部分放在同一页上，那么该页就会非常长。我认为用户不会向下滚动到问题 5-7。
我不知道如何将这些“问题”放在传统的“左侧栏”菜单中，因为它只会在屏幕上垂直占用太多空间。
有没有人对如何设计这样一个页面有任何建议，以便最大限度地减少或完全消除滚动，允许用户扫描 7 个问题，允许用户非常轻松地阅读所有文本等？
如果需要的话我可以使用javascript。我只是在 UI 方面不太有创意，所以我不知道要做什么。这实际上并不是一个如何的问题——这更多的是一个创造力的问题。我是一名服务器端程序员哈哈。
如果您实际上可以在线提供一些成功/盈利网站的示例来展示您的解决方案，那就太好了；）
谢谢！
I am not a great UI designer, so I thought I'd throw this out to those who are better at designing interfaces that are usable and have the potential to look good.
I have a public page on a site that has a lot of copy (as in copywriting). The section consists of 7 big sections. Each section has many paragraphs, and possibly some images.
Now, the section title is a little unconventional in that they are quite long - they are actually full length questions being asked of the user. I guess the idea is that when they scan over the questions, they will read the paragraphs below if it applies to them.
If I just put all the sections on the same page, the page turns out to be really long. I don't think users are going to scroll down to question 5-7.
I don't see how I can put these "questions" in a conventional "left side bar" menu because it would simply take too much space vertically across the screen.
Does anyone have any suggestions on how to design such a page so that it minimizes or completely eliminates scrolling, allows the user to scan the 7 questions, allows the user to read all the text, etc. very easily?
I can use javascript if I need to. I am just not very creative when it comes to UI, so I don't know what to do. It's not really a question of how - it's more of a creativity problem. I am a server-side programmer LOL.
If you can actually provide a few examples online of successful/profitable sites that demonstrate your solution, that would be a bonus ;)
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以为每个问题提供一个标题（原始问题的简短版本）并折叠长版本。标题前面有“+”号或标题下方有“阅读完整问题”链接，表示还有更多文本。
You could give each question a header (a short version of the original question) and collapse the long version. With a "+" sign in front of or a "read full question" link below the header you indicate there is more text.
我建议将问题截断到一定数量的字符，并在末尾添加“...”。如果用户将鼠标悬停在文本上，请展开问题。首先请参阅 http://api.jquery.com/hover/。
I suggest cutting the questions off at a certain number of characters and add "..." to the end. If the user hovers over the text, expand the question. See http://api.jquery.com/hover/ for a start.
查看以下链接
第一页：左侧包含链接，点击链接将在右侧显示内容。
第二页：顶部包含链接，点击链接将转到内容，内容末尾有一个到顶部的链接
第三页：与第二页类似，但内容是可折叠的。
您也可以使用手风琴控件（ http://docs.jquery.com/UI/Accordion ） .
对于上述所有解决方案，您可以使用norma javascript 或 JQuery。
look at following links
first page : contains links on left, click on link will show content on right.
second page: contains link on top, click on link will take to content, at end of content there is a link to Top
third page: simillar to second but content is colapsible.
Also you can use accordian control ( http://docs.jquery.com/UI/Accordion ).
for all above solution you can use norma javascript or JQuery.
我猜要求营销人员重新处理内容不是一个选择（请参阅http ://www.nngroup.com/topic/writing-web/ 了解网络写作的技巧）。 :-/
您可能会考虑采用传统目录的设计。如果可以的话，调整文本，使最有意义和最独特的单词位于每个问题的左侧（即不要重复冗余信息）。如果有帮助，您可以将每个项目中的一两个关键术语加粗以方便扫描（出于这个原因，Google 在其搜索结果中这样做）。
目标是总结并促进正确的选择，然后允许用户导航到详细信息 - 如果您愿意，您可以使用页内锚链接。即使页面很长，也不会害死人；用户知道如何滚动（如果他们知道下面有东西可以滚动）。例如：
最适合我的情况是...
我未婚，没有孩子，而且我不会照顾生病的人。
洛雷姆·伊普苏姆...
我已婚，我们不照顾孩子或生病的成年人。
洛雷姆·伊普苏姆...
I'm guessing that asking the marketing people to re-work the content is not an option (see http://www.nngroup.com/topic/writing-web/ for tips on writing for the web). :-/
You might consider a design that falls back on a traditional table of contents. If you can, tweak the text so that the most meaningful and unique words are on the left side of each question (i.e. don't repeat redundant information). If it helps you can bold one or two key terms from each item to facilitate scanning (Google does this in its search results for this reason).
The goal is to summarize and facilitate the proper choice, and then allow the user to navigate to the details — you can use in-page anchor links if you like. Even if the page is long that's not going to kill people; users know how to scroll (if they know there's stuff down there to scroll to). For example:
The situation that applies most to me is...
I am unmarried, no kids, and I'm not taking care of of someone who's sick.
Lorem ipsum...
I am married, and we aren't taking care of kids or sick adults.
Lorem ipsum...